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from £99.99 


RedHat Linux is the industry 


standard operating system for 

web hosting & Internet services, 
serving some of the world's 
largest & most complex web 
sites. RedHat Linux has the 
power, reliability & value for 


money you have heen looking for. 


EST TRE ELE SEO AE, 
Linux Special 


Celeron 667 MHz, 20GB UltraDMA Disk, 
128MB SDRAM, 5GB Bandwidth p.m 
RedHat Linux 0S 


Linux Professional 


Intel Pentium Ill 800MHz, 2x20GB 
UltraDMA Disks, 256MB SDRAM, 
15GB Bandwidth p.m 
RedHat Linux OS 


Linux Ultra Il 


Dual Intel Pentium {Il 1GHz, 2x18G6B 
SCSI Disks running RAID], 512MB 
SDRAM, 35GB Bandwidth p.m 
RedHat Linux 0S 


from £199.99 


Microsoft Windows is the choice 
of many small businesses & 
large corporations. Ideal for 
MS(Ps, MCSEs, Visual Basic 
programmers & projects that 
require ASP SQL or Office 

components. We manage 
hundreds of Windows servers, 
giving you confidence that your 
web server is in the best hands. 


Windows Special 


Celeron 667MHz, 20GB UltraDMA Disk 
128MB SDRAM, 5GB Bandwidth p.m., 
Windows 2000 or NT4 


Windows Professional 


Intel Pentium Il 800MHz, 2x20GB 
UltraDMA Disks, 256MB SDRAM 
15GB Bandwidth p.m 
Windows 2000 or NT4 


Windows Ultra II 


Dual Intel Pentium Ill 1GHz, 2x186B 
SCSI Disks running RAID], 512MB 
SDRAM, 35GB Bandwidth p.m 
Windows 2000 or NT4 


from £99.99 


The Single Site Server is as easy 
to use as a virtual server, including 
all the features you are familiar 
with, but on a standalone 
dedicated web server that gives 
you the speed, scalability & 
redundancy that you have 
dreamed of. 


Single Site Special 
Celeron 667MHz, 20GB UltraDMA Disk, 


128MB SDRAM, 5GB Bandwidth p.m 
Linux OS with Virtual Control Panel 


Single Site Professional 


Intel Pentium Ill 800MHZ, 2x20GB 
UltraDMA Disks, 256MB SDRAM, 
15GB Bandwidth p.m 
Linux OS with Virtual Control Panel 


Single Site Ultra II 


Dual Intel Pentium Ill 1GHz, 2x18GB 
SCSI Disks running RAID], 512MB 

SDRAM, 35GB Bandwidth p.m 

Linux OS with Virtual Control Ponel 


from £99.99 


The original 'Web-in-a-box' 
solution for thousands of 
companies. Easy to use & 
easy to manage with the 
highest dedicated support level 
available. As a Cobalt True Blue 
Diamond partner, our customers 
benefit from the lowest prices, 
advanced sales literature & 
technical expertise. 


RaQ 4 128 


10.26B Disk 
128MB SDRAM 
5GB Bandwidth p.m. 
Cobalt Linux 0S 


RaQ 4 256 


20.4GB Disk 
256MB SDRAM 
15GB Bandwidth p.m 
Cobalt Linux OS 


RAID RaQ 4 256 


2x206B Disks running RAID 
256MB SDRAM 
25GB Bandwidth p.m 
Cobalt Linux 0S 


www. dedicated-servers.co.uk 
_ sales@dedicated-servers.co.uk 
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from £199.99 
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from £99.99 


Locate your servers in our state 
of the art Data Centre. Simply 
choose between space for one 
server, a half rack or full rack 
of server space. We provide 
competitive bandwidth pricing, 
free reboots and an SLA. 


only £199.99 


For a complete solution to your Web a | requirements, consider the benefits of adding the 
Plus package to your Dedicated Server. Available across all our Dedicated Servers, the Plus package 
offers outstanding value for money and total peace of mind: 


When it comes to server reliability 
& performance, Sun Microsystems 
is the market leader. Sun servers 
are built around the Sun Solaris 
operating system & are ideal for 
customers who need a seriously 
heavy duty UNIX system. Sun 
Servers are also ideal for hosting 
demanding web sites, e-commerce 
enabled web shops, complex 
databases or Internet portals. 


Firewall 
The Dedicated Servers Firewall eval allows customers to protect their machine against unwanted 
visitors. Via a web based contro! panel, you have the ability to allow or deny visitors based on rules 
that you set. You can add any number of rules that you wish to your Firewall system. 


Backup 
An important decision when choosing your Dedicated Server is considering how you will back up the 
dota on your new machine. Even though we use the best hardware that is available for all our servers, 
disks can occasionally fail, and in some cases the data on them may be lost. We strongly recommend 
our backup solutions using StorageTek tape libraries. This service includes: configuration of server side 
backup routine, 10GB of tale tapes stored securely on site in a large fireproof safe, and free 
recovery of data in the event of data loss 


Advanced server monitoring 

For customers who require a more advanced level of server monitoring, — to our Advanced 
Server Management product. This product allows you to monitor any number of services on your server 
including Telnel POP3 EMail, Web Server, FIP Server, Domain Name Server, Secure Web Server, SSH, 
Ping. You may also configure any number of additional services and decide how you want to be notified 
of a service failure, either EMail or SMS. Control this account feature in your Dedicated Control Panel 


Sun Netra X1 128 


Sun Netra X1 System, 400MHz 
UltraSPARC CPU, 20GB 7200RPM 
EIDE Disk, 128MB Memory DIMMS, 

Solaris 8 Installed, 15GB Bandwidth p.m 


Co-location Special 


Rock space for your minitower 
or 19" rack server, 2 IP addresses, 
568 Bandwidth p.m 


Available as standard with all our Dedicated Servers is our guranteed Service Level Agreement (SLA). 


Sun Netra X1 512 


Sun Netra X} System, 400MHz 
UltraSPARC CPU, 2068 7200RPM 


Co-location Professional 
Half rack/20 Us of 19" rack server 


We pride ourselves on the highest levels of customer service & quality assurance, which is highlighted 
in four benefits of our SLA a 


' space, 15 100Mb Switch Ports 30 Minute Reboot Guarantee gf % 
5 ene : Seen tee oe : Power rm 7 ae Ip Should your server stop responding, just visit our web based reboot request i . 
olaris 8 Installe andwidth p.m addresses sep pte BL. form to get your server rebooted, within 30 minutes, 24/7, 365 days a year. § : pp i 
Sun N . | 99% Connectivity - Money Back Guarantee \ ° S ’ 
un Netra Co-location Ultra We guarantee that our network will be available at least 99% of the time. aA ¢ r 


Sun Netra Tl Server, 440MHz 
UltraSPARCH CPU with 2MB External 

Cache, 18GB 10000RPM UltraSCS! Disk 
512MB Memory, Solaris 7 Installed 

35GB Bandwidth p.m 


Prices Frozen - Forever! ns 
We guarantee never fo put your prices up, ever, even if prices change for new customers. 


Full rack/40 Us of 19” rack server 
space, 23 100Mb Switch Ports 

23 Power Sockets, up to 60 IP 
addresses, 65GB Bandwidth p.m 


Bandwidth Guarantee 

Unlike some of our competitors, we do not oversell bandwidth. At Dedicated Servers we guarantee that 
we have 1:1 contention ratio on bandwidth. This means that we will always have hen bandwidth 
to service every single customer at their full capacity 


0870 012 6600 


PRICES EXCLUDE VAT AT 17.5% AND SETUP WHERE APPLICABLE. ALL TRADEMARKS ACKNOWLEDGED. E&OE 
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Comprehensive Flash MX test 36 | Atticmedia profiled 82 | 


q 


Find out how to master the new 
video capabilities found in MX, 
and use video in Flash 


We demonstrate how to design a 
Pong-style video game for the 
Pocket PC platform, in Flash 


Content-driven databases have 
become a breeze to develop 
thanks to Flash MX — here's how 


Create an interactive quiz game for 
your site in Flash MX, by following 
this tutorial 


Use the free Graphicscene Flash 
elements on your CD to build a 
fully-functioning Website 


Add funky animated text features 
to yoursite designs — our experts 
show you how 


Use Flash to animate a 
screensaver, then export it for use 
on Mac and PC 


08 


24 


46 


88 


We look at every major new feature 
of Flash MX in our in-depth review, 
Get the lowdown here... 


Eight of the very best Flash artists 
and developers give their verdicts 


An enormous collection of Flash 
commandments covering areas 
like Timeline, Drawing and more 


Optimise your Website for search 
engines, and get more hits 


An easy-to-follow guide to some of 
the hot new additions to 
ActionScript's capabilities 


36 


52 


68 


80 


They're now veterans of the Flash 
design scene, with clients like 
Dazed & Confused and the BBC 


If you've played Spank the Monkey 
(the game, that is) you'll want to 
read this profile 


Using Flash to create television 
animation is this company’s forte 


France's Lille is a town known for 
its Web design agencies, and Oeil 
pour Oeil leads the way... 


CONTROL. 


VECTOR. 


FEY xara Fash Mx tutorial | and Flash MX tutorial EL: = aye Create a screensaver tutorial = a screensaver tutorial 
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94 ‘ 
You'll find a full listing of what's on We check out Web design titles rts Se, arts special e Cc : rs | 


our CD right here 
97 
Subscriptions 
34 If you missed a copy the first time 
around, you can order it here : 
Save £71, when you subscribe to SSL 
Computer Arts and the Specials 98 
63 Film is dead. Long live digital video Advertising 
Win one of four copies of Flash MX SN 
cartora 
— enter today 
93 
and save £24 on 13 issues www.computerarts.co.uk 
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digital training est.1990 


2002ScheduledCowses 


Feb/Mar Mar/Apr Duration Cost 


Design 
illustrator 9 Fdn 
Quark XPress 4 Fdn 


Design for Non Designers 
Adobe InDesign 


Photoshop Fdn 
Photoshop Adv 


Web 


Web Page Design 
Advanced Flash 
Selling The Web 


Filemaker 


FileMaker Foundation 
Intro to Development 
FileMaker Relationships 


Scripting with FileMaker 


tem 


OSX System Admin 
OS9 System Administrator 


10 Apr 
5 Apr 


2 Apr 
8 & 9 Apr 
15 &16 Apr 


12 Apr 
2&3 Apr 


16 817 Apr 
9 &10 apr 


23Mar 
14 May 
2 & 3 May 


20 & 21 May 
15 & 16 May 


7&8 May 
9 & 10 May 


29 May 


2 & 3 May 
16 & 17 May 


27 & 28 May 


1 day 
1 day 
2 days 
1 day 
2 days 
2 days 


2 days 
2 days 
Half day 


admin @nac people “training Couk. 


web : 


www Mac people “training, Couk. 


tel : 
O101 G61 5235 


ist Floor Swan Buildings, 20 Swan Street, 
Manchester, M4. 5J\W 


Graphicscene freebies 


If you look in the Graphicscene folder on 
the root of our CD, you'll find a collection 
of six images and other resources from 
the Graphicscene collection, worth £150. 
And, turn to page 70, and we'll show you 
how to turn this collection of creative 
elements into a working site in Flash 5. 
Graphicscene is a huge resource 
containing imagery from some of the 
world’s leading Flash designers such as 
Eric Varden, Paul Gibbard, Ake Brattberg 
and Jens Karlson. You can check out the 
1000 Flash images in the collection by 
visiting [w] www.graphicscene.com. 


Web Foundry freebies 


It's a double whammy of Flash freebies 
on our CD this issue. The second 
collection of sample Flash resources 
comes from Eyeland’s Web Foundry 
collection. Check out the Web Foundry 
folder and in it you'll find a total of 32 
interfaces and animations for you to 
adapt into your own work. The Web 
Foundry CD sells for $45 and contains 
over 200 animations, 100 layered Flash 
interfaces and 100 audio loops. Bought 
separately online, the samples on our CD 
would set you back $300. For more on 
Web Foundry visit [w] www.eyeland.com. 


If you havent bought Flash MX yet. 
you must try out the demo without 
delay. Here itis... 


Some of the tutorials in the 
magazine require the old version, 
so we've included it on the CD 


Check out the Web games 
designed by Atticmedia, and read 
our profile on page 36 


Try out Wildform’s video-to-SWF 
encoding tool with this brand 
new demo 


EDIT TITLE 


NAME 


Create wild and varied text effects 
and export them to SWF for use in 
your Flash projects 


This handy tool enables you to view 
ActionScript within SWF files. Try 
out the demo now 


Create and publish screensavers 
from your SWF files in minutes 
with this nifty app 


This budget, yet intuitive SWF 
animation package now includes 
ActionScript functionality 


Take this incredibly easy-to-use 
SWF text effects application fora 
test drive 


Create screensavers. standalone 
projectors and more with this app 
from Northern Codeworks 


This useful package enables you to 
create 2D and 3D movies and 
games and export them to SWF 


Use these fully functional demos 
with the tutorial on page 82 to 
produce a screensaver in Flash 
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Flash MX 


The new version is here — we take a look at what it's got to offer... 


£433 
Upgrade from 
Flash £175; from 
FreeHand £93 


1] or 


~ 02082008282 


www.macromedia.com 


] 
¢ Timeline-based animation and 
Web authoring 


© New context-sensitive 
Property Inspector 


© Layer folders 

* Improved shared libraries 

* Direct video import 

* Templates 

* Scriptable masking 

* Application server access 

¢ Pre-defined Flash components 
Free Transform tool 


© Fireworks import with 
vector support 


* Customisable interface 


PC: Pentium 200MHz or higher ¢ 
64MB RAM ¢ Win/98SE/Me/ 
NT4/2000 or XP 


Mac: Power Mac * 64MB RAM ¢ 
Mac OS 9.1 or higher or Mac OS X 
10.1 or higher 


lot has changed in the 18 
months since the last version 


q i a of Flash was released: 


‘f Adobe's LiveMotion, a vector 
animation and authoring package that 
can export in Shockwave Flash format, 
has gone into version 2.0; a slew of 
simple Flash tools have emerged aimed 
at capturing the beginners market; just 
about every vector drawing package out 
there can output to Shockwave Flash 
format. Although there hasn't been a 
significant upgrade, Flash has never 
really been away. The SWF format has 
been growing in popularity and usage. 
Still, now that there are other tools 


on the market that can save to the 
format, this release needs to be 
something special. 

Established Flashers won't need 
persuading to upgrade, they've been 
waiting for this release for months. 
Designers who are new to the Web, or 
those who have bought into the myth 
that Flash is a frivolous bit of kit, are the 
ones that need to be impressed. By now 
you've probably installed a trial version 
of the package at least and will have 
immediately noticed many changes. 

We've dug into the depths of the new 
Flash and it’s a stunning piece of kit. 
Breaking the numbered naming 


“This is a Web GUI creation 
package, a powerful scripting tool 
and an authoring environment..." 


Macromedia Flash Beta Version - [stiletto7 fa] 


+ Timeline 


+ Properties 


for all of its Web applications. 


Flash MX features a revamped interface with dockable 


convention, Flash MX caters for 
beginners and experts, designers and 
developers and takes into 
consideration protocols old and new. 
Flash 5 showed the Web community 
that the package had matured into a 
Web authoring tool to be reckoned 
with. Flash MX takes this to the next 
level; the program is now a Web GUI 
creation package, a powerful scripting 
tool and an application authoring 
environment all in one. This overhaul of 
a favourite package is not only 
significant for developers and 
designers, it's significant forthe Web. 


Interface overhaul 


Flash MX looks different the first time 
you start it. As part of the thoughtful 
hand-holding Macromedia has always 
incorporated into Flash, you'll be asked 
whether you're a designer, a developer 
ora bit of both — that's because there's 


panels and a customisable workspace. Macromedia says that this will be the new standard look 


as In our example we create a new 
movie, then open an existing movie 
that contains Symbols at the same time. 

There's no need to use the Open as Library 
option. If you go to the Library panel, you'll 
notice that both the empty panel for the 
new movie and the populated Library for 
the second are docked in the same panel. 


now so much going on in Flash that the 
interface has been optimised 
according to how you'll use the 
package. As before, you can set up your 
own custom interface layout if you're 
not happy with the one Flash presents 
you with. If you’re working at a lower 
resolution you'll most definitely want to 
alter the default layout, because 
despite Macromedia's best efforts, 
there’s not much space left to work in. 
To overcome some of this clutter, the 
palettes in Flash MX are now all 
dockable within the main interface. 
They have also been redesigned as 
rollups. By default, you can only see the 
title bar of a palette within the 
interface. When you want to use it you 
click on an arrow and the business 
end of the panel appears. All panels 
can be torn from their dock and closed 


Video can now be imported into Flash from a variety of standard formats. The clips are compressed 


GS You can drag and drop symbols 

from the populated Library directly to 
the new movie. In case you wish to add a 
set of related symbols quickly, you should 
make sure that you've selected the right 
frame and layer then drag and drop the 


folder containing all the symbols you want 


direct to the stage. 


if necessary so, if you're a fan of the 
minimal look, you can have that too 
(and even save your own layout to 
reflect that). 

Custom layouts were introduced in 
Flash 5 — but you may need them even 
more in Flash MX. When you first 
launch the program you'll be asked 
whether you want to work as a designer 
or a developer. When you've chosen 
your affiliation, Flash lays out the 
screen accordingly using a prefab 
custom layout. If you can't make your 
mind up you can go with a general 
layout that gives you a bit of everything. 
In truth, none of the above will be 
entirely satisfactory for most, and you'll 
probably spend some of your first few 
sessions with the program putting 
together your own set of frequently 
used layouts. 


q 


and distributed directly to the Timeline, so they can be controlled by ActionScript and treated 


exactly like any other Flash object. 


3 | When you drop Symbols on the new 
stage, a Shared Library link is 
automatically made between the items in 
the original Library and those in your new 
movie. Select an item in your new Library 
and click the Properties icon. Select 
Advanced and in the Source section you'll 
see the original FLA listed. 


Found property 


These interface changes have become 
necessary due to the number of 
attributes and features that can be 
associated with any Flash movie. The 
last couple of versions showed signs of 
window clutter. With thousands of 
additions and changes in Flash MX the 
situation reached critical mass. The MX 
interface isn't an isolated solution, 
though — Flash MX is simply the first of 
Macromedia's Web tools to go public. 
Expect the next editions of ColdFusion, 
Dreamweaverand Fireworks to get 
similar treatment. 

In fact, one of the most inspired 
additions to Flash MX is straight from 
the Dreamweaver development team. 
The package now has its own context- 
sensitive Property Inspector that shows 


4 | To update the Symbols in your Movie, 
return to the original file and make any 
changes to symbols that are required, then 
save the file as normal. Return to the new 
movie and right-click in Windows or Ctrl- 
click on the Mac on the Symbol you want 
to update. Choose Update from the 
context-sensitive menu. 


the relevant settings for the currently 
chosen tool or object. 

While the Flash MX interface may be 
more packed than ever, this single 
addition cuts down the find-time for 
many simple operations, from 
modifying the current document 
properties to changing the fill colour of 
a selected object. The Property 
Inspector does the job of many of the 
old panels, making it possible to 
perform most operations without 
having to open up anything new. You'll 
find that some of the old panels have 
quietly been retired following this 
overhaul. Goodbye to the Instance, 
Frame, Effect, Sound, Stroke, Fill, Text, 
Paragraph, and Character. The functions 
are still there, though, and you'll find 
that you appear in the Property 
Inspector just when you need them, or 


In this version, Components replace Smart Clips - they're Flash objects with editable parameters 
that you can drag and drop into your movies. Flash MX ships with a range of ready-to-use user 
interface components. 


Flash | 09 | 
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[a] Actions for Frame 1 of Layer Name Actions 


/ scrambles the puzzle pieces 
function Scramble() { 


/ enter 


trace action here 


for (var i = 1; i<=49; i++) ( 

with (this[("piece"+i)) (¢ 
_* = Math. floor (Math. random() *400) +360; 
_¥ = Math.floor (Math. random() *460) +40: 
rotation © Math. floor (Math. random() *4) *90; 


The ActionScript editor has had a load of enhancements, including code hinting, colour-coding, a 


search and replace function and auto-formatting. 


that they've been neatly included in the 
Panels that have survived the cull. The 
Stroke and Fill tool properties can be 
edited in the Colour Mixer for example. 

If you need a helping hand, the 
Macromedia Answers panel replaces 
the largely neglected Macromedia 
Dashboard. Where the Dashboard 
acted as an interface to the existing 
Flash Website, the Answers panel 
concentrates on giving access to new 
tutorials, support files and tips. It now 
appears in the Windows menu instead 
of Help. 


Skewed tools 


As part of the interface reshuffle, you'll 
notice a couple of new icons on the 
Tools panel. The new Gradient tool isn't 
really new at all — it used to appear in 
context when you selected a shape with 
a gradient fill. This could have been 
improved further, we feel. Although the 
tool can be used to resize and rotate 
gradients, you still have to open up the 
Colour Mixer from the main menu to 
edit them. It would have made more 
sense if the Property Inspector changed 
to enable colour mixing when the 
Gradient tool is selected. 

Of far more interest is the Free 
Transform tool, an amalgamation of the 
previously separate Rotate, Resize, 
Skew and Deform tools. Once a shape 
is selected using the tool, the changes 
you can impose are governed by the 
relative position of the cursor. This may 
take some getting used to if you’re not a 
big user of vector drawing packages, 
but it effectively reduces the number of 
steps required to transform any shapes. 

The Transform tool also has an 
Envelope mode that lets you edit 
shapes or groups of shapes using 


10 | Flash 


Bezier curves. This addition isa 
massive improvement over the 
primitive Wire Deformation tools Flash 
used to ship with, which are now 
completely absent in this version. The 
tool can also be locked into 
deformation, rotate or resize modes. 
Flash aficionados will be aware of 
the pleasures of the Info panel. Some 
loathe it, but we think it’s one of the 
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as 


> Timeline 


r 


~ Properties 


Adding folders to the Timeline enables you to organise the resources you have on stage in complex 
movies. Existing layers can be transformed into folders, and content dragged and dropped to them. 


best things in the Macromedia 
interface (it pops up in Fireworks too). 
Two plus points in its favour; it enables 
you to specify the dimensions of an 
object exactly using Width and Height 
properties, and you can place things on 
stage with pixel precision. Flash MX 
now introduces a visual method of 
doing the same thing with Pixel-Level 
Snapping. Essentially, this enables you 


~ Library 


+ Library 


to manually place objects to the exact 
pixel you want on stage. You can lock 
the object to this position, ensuring that 
elements are aligned exactly — 
especially handy when trying to line up 
Text with graphic objects. If you zoom 
into the Flash stage, the pixel grid 
becomes visible, guaranteeing hours of 
fun for the compulsive obsessives in 
the design community. 


Color_picker.fla 


Untitled-7 
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Multiple libraries now cleverly dock with each other, ridding users of the frustration that used to arise when working with multiple sources. 


Templates 


Flash templates can be used to speed up work on repetitive projects or skip the design 
stage altogether when you use the pre-defined files that ship with Flash MX... 


as Templates can be created from any 
Flash movie — simply choose File>Save 
As Template and fill in the dialog that 
appears. This will enable you to give a 
name to your template as well as place it in 
a category. 


Library improvements 

The Library panel had its moment in 
the sun with the release of Flash 5. 
Shared Libraries and Library folders 
debuted, introducing features that have 
gone on to become indispensable. 
User feedback from Flash designers 
told Macromedia that the Shared 


2] Flash MX ships with a collection of 
ready-made templates. To create a 
new movie with a template, choose 
File>New from Template and select the 
category that fits the task to complete. 
Choose a template from the list. 


Library function drastically needed 
some attention. 

People quite reasonably assumed 
that if you made alterations to the 
original Library that they should 
automatically be reflected in the 
movies that used that Library. No such 
luck. Flash MX corrects this with an 
update feature that does exactly what it 


“The Library is one of the central 
parts of the Flash interface, 
especially in complex movies” 


For when you need to be really accurate with the positioning of objects, Flash MX features 
Pixel-Level Snapping. 


ee 
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The default templates that ship with 

Flash MX all have detailed instructions 
contained in a guide layer. You can hide or 
delete that layer when you've read the 
instructions, but either way it won't appear 
in your published movie. 


says on the tin. You can choose to either 
manually or automatically update an 
edited symbol to its latest version. 

Shared Libraries are now smarter as 
well. Flash has always enabled you to 
have more than one movie open at 
once, enabling you to drag and drop 
elements from one movie's library to 
another. Flash MX now tracks symbols 
as they're copied from one document to 
another, remembering the location of 
the original symbol. This is a more 
transparent implementation of the 
Shared Libraries feature, and itis a very 
welcome addition. 

The Library is one of the central 
parts of the Flash interface, especially 
in complex movies. It’s been 
problematic in previous versions, 
though — especially when you're 
working with several movies or 
Common Libraries at once. Common 
Libraries are the custom Libraries you 
can create to store frequently used 


i 

L g { 

4 | As templates are essentially just Flash 
movies, you can edit any element 

within them, including the scripts attached 

to objects. Although, when creating your 


own, it's advisable to make navigation 
independent of named frame targets. 


objects, like sounds or buttons. And 
whenever you open a new movie, you 
open a new Library as well. 

When working on complex projects 
you could easily end up with several 
Libraries open at once, making it 
difficult to track which was which. In 
Flash MX, all open Libraries 
automatically dock into the same panel 
with a unique title bar. They also exhibit 
the same rollup behaviour as all the 
new panels in Flash MX, so you can 
easily hide the content of the panel 
without losing quick access to it. 


Timeline 


Tweaks to the Timeline continue from 
previous versions, including one 
change that veteran Flash animators 
will be very pleased about. It now works 
properly. That's not to say that it didn't 
work before, but the method for cutting 
and pasting multiple frames and 


Flash Player 4. 


Usage 
stopDrag() 
Parameters 


Description 


Example 


mouse button: 


uy jon(press) 


411) 


Action; stops the current drag operation. 
| This statement stops the drag action on the instance mo when the user releases the 


£ 
startDrag("mc")7 


The Actions Editor comes with a full reference panel that contains descriptions of every available 
command. Code hints also appear as you enter ActionScripts manually. 


Flash 


|) Macromedia Flash Beta Version - [ 


: — 
le} Actions for Frame 2 of Lager Name Actions 


complex_mask. visible = false; 
Circle, visible = false; 
angel. visible = false; 
complex _maskee. visible = false; 
scenery. visible = false; 
sStripesi. visible = false; 
stripes2. visible = false: 
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complex_mask.stop; 
complex_maskee, stop; 
stripesi.stop; 
strives.ston: 


ActionScript has had an overhaul, with the addition of many new commands and objects anda 
clearer hierarchy. New commands include support for mask objects. 


keyframes was counter-intuitive. 
Frames can be pasted exactly where 
you want them, not in the first available 
space. The Property Inspector makes a 
great difference to the way you work 
with the Timeline too — with sound, 
tweening and frame name options all 
clearly visible and editable. 


") Macromedia Flash Beta Version {Untitled-6] 


A big organisational improvement is 
the addition of folders to the Layers 
section of the Timeline. Like the Library, 
you can now create folders and stash 
Layers away into them. These can be 
moved around and given unique names 
just like Layers. This is a great way to 
manage complex animation projects or 
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Many of the panels in Flash MX aren't required to be open all the time because the new Property 
Inspector does their job instead. Changing to reflect the editable parameters of the currently 
selected object, this is a great idea inspired by Dreamweaver. 


to explicitly separate frame labels and 
ActionScripting from your design work. 


Rich media support 

The success of Shared Libraries, plus 
the enthusiasm within the Flash 
community for using Movie Clips with 
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Flash menus can be docked with each other in a skyscraper layout and fold out when needed. When one menu is opened others shift down to save space. 


the loadMovie command as containers 
for external media, has made an impact 
on the Flash creation team who have 
now included dynamic support for 
JPEG and MP3 media files. You can use 
ActionScript to load these media types 
from external files at runtime. As well 
as helping to reduce the size of the 
initial Shockwave Flash file, optimising 
bandwidth use, you can also easily 
replace external files without having to 
edit the original Flash movie. 

In addition, Flash boasts better 
support for several imported file types. 
There are improvements to the import 
routines for Freehand 10 and Adobe 
Illustrator files, preserving the integrity 
of the original files. The same treatment 
has been given to Fireworks PNG 
support, with impressive results. The 
previous import routine was 
unpredictable and corrupted many 
Fireworks elements. Flash MX’s layered 
objects, text and vector graphics are 
rendered so well that it's tempting to 
switch to Fireworks’ enhanced drawing 
tools to generate all your initial 
graphics for Flash. 

One feature of MX that will have you 
gasping is the ability to import video 
directly into your movies. Using 
Sorenson Spark compression 
technology, any standard video file 
supported by QuickTime or Windows 
Media Player can be converted, 
including MPEG and AVI. The individual 
video frames are distributed to the 
Timeline, giving you complete control 
overa clip. They can be scaled, rotated, 
skewed and distorted. It’s also really 
easy to create playback controls using 
the same basic ActionScripting that 
you'd use to control any Flash movie. 


Although simple in implementation, 
this feature means a lot to Web 
developers, especially as broadband 
connections catch on. The Flash 
Timeline is ideal for simple video 
editing, and users will no longer need to 
have a host of proprietary plug-ins to 
play back rich media content in your 
site. The level of compression is 
acceptable in comparison with existing 
video technologies, and you can be 
sure that if your user can play back 
Flash content, they can play back video. 

Our one gripe, and it’s a small one, is 
that this feature won't be ready to 
replace dedicated video streaming 
solutions until it can match the variable 
quality features of QuickTime or 
RealVideo — and it’s certainly not 
ready for live broadcast applications. 
But this is a small complaint when you 
look at the bare facts, for example, you 
can now import video directly into 
Flash as easily as importing a bitmap. 


Text tweaks 


Text handling has come on in leaps over 
the various versions of Flash. ln MX 
there are some broad changes that 
make their greatest impact when 
applied to Text objects as well as some 
more specific changes. One new icon 
you'll find in the Text Inspector enables 
you to change the orientation of text — 
enabling you to place vertical text on 
screen. Although this is part of the 
program’s provision for Oriental 
languages, it's a welcome tweak from a 
design point of view too. 

Text animation has become one of 
the most prevalent uses of Flash — 
especially in banner ads. Flash MX 
makes it easier with an option that lets 


The Flash Player is usually the 
forgotten component in every 
upgrade, but this time it’s had 
some special attention. 
Following complaints that the 
Mac version was slower than the 
Windows incarnation, there has 
been an investment of effort in 
bringing it up to speed. In fact, in 
our use of Flash Player 6, it’s the 
Windows version that appears to 


be glitched. It occasionally 
appears to choke ona Flash 5 
authored SWF file and refuses to 
show anything onscreen. 
Refreshing the browser seems to 
do the trick. If this bug hasn't 
been fixed by the time you read 
this, it soon will be. 

Will it be worth the upgrade 
to users who may have been 
browsing with the Flash 5 player 


fora year and a half? We think 
that the ability to view inline 
video will be incentive enough - 
plus Macromedia makes it really 
easy to upgrade with an 
automatic link to its download 
site when a site fails to initialise 
in the plug-in. So the question 
left unanswered is, why is the 
plug-in called Flash Player 6 
instead of MX? There are two 


answers. The marketing answer 
is that MX is the name forthe 
new cross-application interface 
that will eventually be applied to 
ColdFusion, Fireworks, 
Dreamweaverand UltraDev as 
wellas Flash. The technical 
explanation is that plug-in 
detection routines use a 
sequential number to decide 
which version you're using... 


you break apart text strings into 
separate characters. There’s no new 
procedure for this, just choose a text 
field and go to Modify>Break Apart 
and Flash separates the characters as 
an intermediary stage. This is even 
more powerful when combined with the 
new Distribute to Layers command. 
This lets you select multiple objects 
and automatically create a new layer for 
each selected one. The layers are 
named automatically — in the case of 
text strings it'll be named after the 
letter associated with it. If the object is 
a symbol or bitmap the layer will take 
the name originally assigned to it. With 
text objects, this operation will let you 
easily apply animated transformations 
and tweening effects to text that were 
slow and fiddly to apply before. 

The Flash marketing literature also 
makes a feature of the fact that Flash 
MX prompts you to substitute missing 
fonts when you open a Flash project on 
a different machine. This is one 


Text transformations 


instance when we feel we can be 
churlish and say, that should have been 
there from the beginning, shouldn't it? 
The last version of Fireworks had this 
feature and that was contemporary with 
Flash 5. What took them so long? What 
would be more useful is a method of 
embedding fonts in FLAs as well as 
Shockwave Flash files. 


Component parts 


While we've concentrated on the 
enhancements that directly affect 
designers here, from new drawing tools 
to improved Fireworks PNG import, 


some of the biggest changes in Flash 
MX are in its Web development 
capabilities. A smart move has been 
the revamping of Smart Clips. They 
were great before, but few people 
understood them. Now they're called 
Components and Flash comes bundled 
with a set of useful interface widgets 
that can be dragged and dropped to the 
stage with minimal editing. 

Components are easier to author in 
Flash MX than Smart Clips were in 
Flash 5. They now have their own 
parameters panel which can be used 
to edit existing Components or build 
the attributes of new ones. Still, at 


“A smart move has been the 
revamping of Smart Clips... now 
they’re called Components” 


The new Free Transform tool is more intuitive and less cumbersome than the widgets it replaces... 


without it being changed to vector 


shapes first. Here we type in some text, hit 
the Free Transform icon and we're able to 


rotate, resize and skew it freely. The text 
remains editable at all times. 


@ If we want to apply an envelope to 
some text, then we still need to break 
it apart. Press Command/Ctrl+B twice to 
change the selected text to shapes. Select 
the Free Transform tool and the Envelope 
modifier on the Tools panel. 


3] You can freely distort the text now 
using Bézier handles. Another editable 
text transformation you can try is in the 
Property Inspector when a Text object 

is selected. This enables you to change 

the orientation of text from horizontal 

to vertical. 


4 | With a Text object selected, hit the 


Break Apart key combination once to 
separate the text into layers. From there go 
to Modify>Distribute to Layers to 
automatically place each character in its 
own layer. Apply separate tweening to each 
letter to create quick text effects. 


Flash 


arts 


the heart of any Component will more 
often than not be some ActionScript 
function that may be beyond the 
interest of many Flash users with a 
design bias. Lucky for them, 
Components are easier to package for 
distribution than their overlooked 
predecessors, and new ones can be 
downloaded from the Macromedia 
Exchange for Flash and installed 
directly into the Components Panel. 
Existing components are also relatively 
easy to alter aesthetically — so you can 
change how a Component looks by 
editing its graphic elements, leaving 
the scary scripted parts untouched. 


ActionScripting 


If you're an ActionScript nut, you'll have 
hours of fun delving into the revamped 
scripting structure and tools. Both 
expert and normal views have now 
been augmented with improved code 
layout and some new commands that 
make XML and application building a 
lot easier. These changes are allied to a 
more clearly delineated Object/Event 
model. You're now able to directly refer 
to specific generic object types and 
alter the parameters accordingly, which 
has generated a whole new set of 


commands to get used to. These are, 
without exception, very welcome. 

The shift brings with it the ability 
to directly affect the sounds, movie 
clips, the stage and even properties 
within the Flash Player itself. Alongside 
these changes are a set of capabilities 
properties that enable you to 
interrogate the browser or device that 
Flash is running on. These can be 
employed to redirect users to 
Shockwave Flash files tailored to their 
system, or be used to set up variable 
parameters within a movie. 

Alongside these extensions to 
the language is a revamped 
ActionScript editor. Making its first 
appearance in Flash 5, the MX 
ActionScript editor is more complex 
than its predecessor, but boasts a 
series of usability enhancements. The 
hierarchical command tree has been 
reorganised to reflect the new 
Object/Event model, with several older 
commands being dumped ina folder 
labelled Depreciated. 

It may take you a while to find the 
command you're after if you're used to 
the old editor, but seasoned scripters 
will be typing direct in any case. This 
has been made easier with the 
introduction of Code Hinting for 


“Flash MX could change the way 
the Web and other new media 
look entirely" 


Flash MX ships with a series of custom layout settings to be tailored for either designers or 
developers. You'll find that you'll need to create several of your own to make the most of these tools. 


parameters, properties and events that 
appear as you type. The syntax 
highlighting function that colour codes 
your scripts is now editable as well. 
Along with a full ActionScript reference 
within a Flash panel and improved 
search functions, you may no longer 
need the features that enables you to 
load scripts from text files. 

Among the enhanced ActionScript 
commands are several designed to 
enhance connectivity with remote 
servers. Flash Generator has effectively 
been ditched in favour of a more 
universal Application Server Gateway, 
which is optimised for Macromedia's 
ColdFusion, but supports other 


Macromedia is keen to get rid of 
the perception that Flash is just 
an animation package. It may 
have started life like that but, 
after several major revisions, 
Flash is now a major league 
authoring package that in some 
ways is every bit as powerful as 
Director, the company’s 
dedicated multimedia authoring 
tool. With the introduction of 
direct support for video in the 
Flash MX Timeline, there's little 
Flash can't do that it's older 
stablemate can. 

In Flash MX, the main 
updates address the changes 
that have happened to the Web 


over the last two years. It's no 
longer a static medium - the 
majority of commercial 
Websites now pull content from 
application servers of one type 
or another, using live databases 
to keep that content up to date. 
In Flash, this is reflected ina 
series of design tools that make 
it easier to put together forms 
and application interfaces. On 
the development side we also 
see more investment in XML as 
a bridging language, plus a 
dedicated Application Server 
Gateway, support forthe 
Macromedia Communication 
Server for two-way messaging 


with audio and video, and new 
ActionScript objects for 
communicating with Web 
servers. Although interface 
changes, the Property Inspector 


and the overhauled Timeline 
may be the features that Flash 
designers have been waiting for, 
the most revolutionary aspects 
are aimed at development. 


Using a combination of Flash and Coldfusion, an online booking form 
that takes up five pages of HTML is reduced toa one-page app. 


protocols including MS .NET and JSP 
This is reason enough for any serious 
Web developer to want to upgrade. The 
Web is becoming more and more 
dynamic all the time — and although 
Flash has been capable of serving as a 
front end to application server powered 
sites before, it's now actually easier to 
do it Flash than in HTML. 

The transition from Flash 5 to Flash 
MXwill be an easy one for most users. 
All the familiar tools are still here, but 
they're now joined by a slew of major 
enhancements that will keep you busy 
for weeks. Few tools as complex as 
Flash could boast that anyone can get 
results straight out of the box. Flash MX 
is now the designer’s must-have 
package, the Web's only bona fide 
multimedia authoring tool. The 
curmudgeons and luddites who think 
that the program is just for animation 
purposes are in fora surprise because, 
in the right hands, Flash MX could 
change the way the Web and other new 
media look entirely. 
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Nevil Slade 


Nevil Slade is Managing Director of Theory7 — a 
company specialising in creating immersive, 
interactive environments on the Web. One of the 
company’s most recent jobs was the redesign of 
the Guinness World Records Website. See 

[w] www.theory7.com for more. 


CA: What do you think are the most useful/ 
significant new features of Flash MX... and why? 
NS: It would have to be MX’s ability to load 
both JPEG and MP3 files dynamically without 
the need for Generator. One of the most 
significant new features has to be the new 
device support — you can get a Flash movie to 
control a user’s microphone, Webcam and 
store files on their PC. The level of its 
usefulness will be proven in time, though. 

CA; What new features are going to be of most 
use in your day-to-day workflow? 

NS: Collapsible floating palettes will speed up 
navigation around the interface and avoid the 
clutter of the Flash 5 palettes. The colour 
palette has finally been sorted out into one 
neat, easy-to-use panel. This will speed up 
colour creation and avoid the confusion of the 
existing Flash 5 system which has two separate 
panels for choosing colours. The Distort tool 
will enable me to add a hint of 3D to my Flash 
elements without the need for external apps. 
CA: In which direction do you think 
Macromedia is taking Flash... is it the right one? 
NS: Making Flash more of a whole design and 
development solution, while avoiding having to 
use several other applications to get the job 
done, can be nothing but good from a Flash 
designer's point of view. The most logical 
progression would be to extend Flash’s 
capabilities to match the power of Director. It 
would make Flash a more expensive product, 
but then | would certainly rather have one 
piece of software that does everything | need. 
CA: What would you have liked to have seen in 
Flash MX that wasn't added? 

NS: The ability toimport PSD files. This would 
enable a designer to import a multiple layered 
Photoshop file into Flash. Flash could then 
preserve the Photoshop layers across Flash 
layers, ready to be manipulated and animated 
as separate elements. 


Jamie Macdonald 


Jamie Macdonald is Senior Developer at 
Relevare, a company specialising in creating 
customised Web databases and front-end Flash 
interfaces. See [w] www.relevare.com. 


CA: What do you think are the most useful/ 
significant new features of Flash MX... and why? 
JM: A lot of the new features are things that 
were possible in Flash 4/5 but required a lot of 
effort, calling for complicated scripting and/or 
the use of JavaScript or server side languages. 
MX makes a lot of these accessible to the 
intermediate user. For example, you can load 
in JPEGs or MP3s without the need to convert 
them to SWFs on the server, and easily create 
dynamic masks. The increased ease of use is 
the most significant new feature. | think the 
added control over text is an excellent feature 
in that it enables one to emulate much of the 
layout functionality of HTML. 

CA: What new features are going to be of most 
use in your day-to-day workflow? 

JM: The improved script editor and the general 
interface improvements should improve 
workflow. The internal ActionScript reference 
is also a nice addition. 

CA: In which direction do you think 
Macromedia is taking Flash... is it the right one? 
JM: With Flash MX, Macromedia seems to be 
taking it in several different directions. Firstly, 
with all the improvements in scripting, there is 
an interest in establishing it as a versatile 
platform for creating robust Web applications. 
Itis being made a lot more accessible, 
introducing components which make it easier 
to add all of the standard GUI elements like 
scrollbars and so on, addressing usability 
concerns as well as cutting down development 
time. On top of this | think the video support is 
quite significant, especially bearing in mind 
the size of the plug-in. 

CA: What would you have liked to have seen in 
Flash MX that wasn't added? 

JM: | think the ability to automate things in the 
interface would be very useful, perhaps like 
the way you can create and batch execute 
actions in Photoshop. 


Adam Robertson 


and Simon Oliver 


Adam Robertson is Technical Director and 
Simon Oliver is Creative Technologist at 
Random Media. See [w] www. 
randommedia.co.uk for more info. 


CA: What do you think are the most useful’ 
significant new features of Flash MX...and why? 
AR: Drawing API is something that we need as 
we have been faking it for ages. We have been 
crying out for dynamic loading of images or 
sounds without the use of additional software. 
Components — an extension of Flash 5's Smart 
Clips — can do everything you wanted a Smart 
Clip to do and open up the gates to making 
exchangeable plug-in type components. 

CA: What new features are going to be of most 
use in your day-to-day workflow? 

SO: The interface. | feel like | have control over 
my layout now, and it’s easier to access 
settings for objects on the stage with the 
Properties Inspector, where most palettes are 
combined into one place. Components are 
definitely going to save a lot of time coding. 
CA: In which direction do you think 
Macromedia is taking Flash... is it the right one? 
AR: | think MX is moving in an interesting and 
bold direction. If Macromedia pulls it off, | can 
see MX becoming a viable alternative to HTML 
for building complete interactive sites. These 
are the things that Flash does best, but some of 
the basic elements of HTML were missing. | 
can see Flash becoming the standard for the 
interactive visual sites that the public expects. 
CA: What would you have liked to have seen in 
Flash MX that wasn't added? 

AR: The only thing | have come across is 
dynamic loading of video files at run-time — 
the addition of the video was also a surprise. 
SO: My biggest gripe is that you can’t change 
the pitch on sound. Hardware acceleration to 
speed up graphics rendering would have been 
a useful addition, making the plug-in even 
more impressive. The ability to dynamically 
import more media types is definitely on my 
wish list, and it would be good to manipulate 
the video a little more, such as blurring, colour 
saturation, and colour balance. 


Jake Smith 


Jake Smith is co-founder and creative director 
at jp74, a new company focusing on digital 
entertainment and content for kids. Jake worked 
for Subnet for five years before starting up jp74 
with fellow ex-Subnet employee Pete Walker. 


CA: What do you think are the most useful/ 
significant new features of Flash MX... and why? 
JS: The video streaming is going to be big. 
Choosing a streaming player was always a pain 
as there wasn't one player that everyone had, 
PC users have Windows Media Player, and 
Mac users have QuickTime. 98 per cent of the 
Net-surfing population has the Flash plug-in, 
therefore 98 per cent of the Net population 
will also have one common video stream 
player (when they upgrade, of course), 

CA: What new features are going to be of most 
use in your day-to-day workflow? 

JS: The improvements to the Actions window 
are priceless, as it was really basic to begin 
with, but now has things like auto-complete 
and intelligent tabbing. The components will 
play a bigger and bigger part in day-to-day 
Flashwork, making mundane and repetitive 
stuff quick and easy. Looking forward toa lot of 
custom made Components too. 

CA: In which direction do you think 
Macromedia is taking Flash... is it the right one? 
JS: Flashis walking a tight line between 
delivering exactly what all the code-freaks 
demand, yet still having to offer an easy 
learning curve for the first time user, | think it’s 
doing it right. Flask MX feels like a much more 
solid and polished offering than Flash Sdid. 
CA: What would you have liked to have seen in 
Flash MX that wasn't added? 

JS: I'm not sure what I'd like to see that’s not in 
there, but the best thing that is in there is the 
fact that it runs on Mac OS X! 


“Flash 
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Brendan Dawes 


Brendan Dawes Is Creative Director at 
magneticNorth. Brendan is a regular speaker at 
Flash events, including FlashForward and 
Computer Arts LIVE and has completed his first 
book for New Riders called Drag Slide Fade. 
See [w] www.brendandawes.com and 

[w] www.magneticn.co.uk for more. 


CA: What do you think are the most useful/ 
significant new features of Flash MX... and why? 
BD: The accessibility features go a long way to 
address the issue that people have always 
flagged up as why they don't use Flash. | also 
like the fact that scrollbars and the like come 
ready-made. Now designers can get back to 
creating rather than spending hours designing 
and coding things like scroll bars. Those 
mundane things should be easy. Flashis a 
creative tool. The video stuff is very cool and 
long overdue, and the codec only adds 80k to 
the Flash Player size. 

CA: What new features are going to be of most 
use in your day-to-day workflow? 

BD: MX is integrated even more with other 
software tools than just Macromedia’s suite 
(Toon Boomand Illustrator). The ability to keep 
layers intact and symbols etc is a big boost 
when working with several other programs. 
CA: In what direction do you think Macromedia 
is taking Flash and is it the right one? 

BD: | think Macromedia is looking at 
connected applications in a big way, not just on 
the Web but across embedded and wireless 
devices. Flashis not just about animation, it’s 
about intelligent interactive apps that you can 
build quickly and integrate with technologies 
such as XML, and that work across a variety of 
platforms, even PlayStation 2s! 

CA: What would you have liked to have seen in 
Flash MX that wasn't added? 

BD: I'd love to have seen a button called Fix it 
in the Mix. When you press it you hear the riff 
from the eighties disco classic Last Night A DJ 
Saved My Life, and any dodgy graphics or code 
gets fixed, right in front of your eyes, while the 
DJ says, “There's not a problem that | can'tfix, 
‘cause | can do it in the mix.” 


Tony Hégavist 


Tony Hégqvist is a Flash designer at Houdini, a 
company that creates digital experiences and 
concepts. Tony, colleague Patrick Gardner and 
Starlet Deluxe founder Tony Sajdak are soon to 
launch a new interactive bureau in Stockholm, 
called Perfect Fools. See [w] www.houdini.se 
and [w] www.perfectfools.com. 


CA: What do you think are the most useful’ 
significant new features of Flash MX... and why? 
TH: The new window layout. | really like the 
new palettes and think they're a smart move 
away from the Adobe-style environment. 
There’s not a lot new in the toolbar, but what's 
been added is great. Still the biggest news is 
ActionScript. To summarise everything, the 
ability to link data between more hardware 
than just the mouse, keyboard and computer is 
really a step in the right direction. 

CA: What new features are going to be of most 
use in your day-to-day workflow? 

TH: The ability to create design templates, link 
in external ActionScript and share the same 
library. The exciting things will happen when 
people start to investigate the opportunities to 
handle sound and video, interactive films, 
voice control and other creative programming. 
Some illustrators who import directlyinto 
Flash are sitting with Flash 4, so this is more of 
a technical development than a graphical one. 
CA: In which direction do you think 
Macromedia is taking Flash... is it the right one? 
TH: Cross-media and advanced scripting. 
Macromedia wants to make Flash the tool for 
creating digital content, and it has positioned 
itself in just the right way on the Internet. | have 
developed mobile games for the Pocket PC, 
and it worked quite well. There is some way 
left, but you read every day about a new device 
that supports Flash. And| can guarantee we'll 
be hearing about lots more soon. 

CA: What would you have liked to have seen in 
Flash MX that wasn't added? 

TH: The new functions are very welcome, and 
the upgrade is worth it. Then there are always 
things to dream about. The biggest is 3D. I've 
seen a few interesting 3D modelling solutions 
in ActionScript. I've worked on some myself, 
but it’s complicated and time-consuming. 


Tom Burr 


Tom Burr Is a Flash designer at Bluewave, a 
global online solutions provider founded in 
1995, with studios in London, New York and 
Singapore. See [w] www.bluewave.com for 
further info. 


CA: What do you think are the most useful/ 
significant new features of Flash MX... and why? 
TB: Macromedia has effectively created a 
one-stop media player. The introduction of the 
Sorenson player to the plug-in-has opened the 
doors for full Flash broadband content. 
Coupled with the collaboration server; 
interactive, multiple user, broadband Flash 
content is just round the corner. 

CA: What new features are going to be of most 
use in your day-to-day workflow? 

TB: The reusable and adaptable components 
and templates and Macromedia's support of 
e-learning initiatives. Flash MX ships with a 
range of learning interactions complete with 
the connections required to hook the results 
into an LMS (learning management system) via 
the industry standard protocols. The 
improvements to the Actions window have 
made development easier, and the addition of 
the context-sensitive Code Hints and the 
reference window have sped up scripting. 

CA: In which direction do you think 
Macromedia is taking Flash... is it the right one? 
TB: Macromedia has realised the potential of 
the Flash Player's ubiquity and is moving the 
Flash format into the serious Web-app market. 
New server side technology will make hooking 
Flashinto back-end systems easier still. 
Looking ahead, its not a huge leap of the 
imagination to picture a scenario where Flash 
replaces the standard HTML/browser set-up 
as the standard Web delivery method 

CA: What would you have liked to have seen in 
Flash MX that wasn't added? 

TB: The ability to load GIFs during run-time. 
Printing that works how | wantit too! — to be 
able to print whatever is on the screen, no 
matter how it was generated. 


Brian Ghidinelli 


Brian Ghidinelli works for vFive. The company 
provides strategy, design and technology 
consulting and services. It is responsible for 
the Boreal Mountain Resort Website 

([w] www.borealski.com), one of the pieces of 
example launch content for Flash MX. 

See [w] www.vfive.com. 


CA: What do you think are the most useful/ 
significant new features of Flash MX... and why? 
BG: Components. The lack of standard form 
elements in Flash made it significantly more 
expensive to build Web applications in Flash 
against HTML. With the advent of components 
and the basic Ul controls that MX ships with, 
building a data-driven Web app with Flash MX 
as the presentation layer is more rapid. 

CA: What new features are going to be of most 
use in your day-to-day workflow? 

BG: Components again, as | am the lead 
developer | can build them and hand them off 
to my designers who implement them with 
minimal hassle. | think the second biggest 
thing is the improved workspace, especially 
for developers. The ActionScript editor is also 
substantially better. 

CA: In which direction do you think 
Macromedia is taking Flash... is it the right one? 
BG: | think we're only seeing the tip of the 
iceberg. | doubt anyone would claim HTML is 
the ultimate user interface; if so they wouldn't 
be trying to use DHTML/JS to create more 
interactivity. Frankly, | believe that MX’s real 
success is going to be behind the scenes — 
Intranets, Web apps, data-driven screens and 
apps where HTML just isn’t flexible enough. 
CA: What would you have liked to have seen in 
Flash MX that wasn't added? 

BG: Adobe's products are polished; they work 
as expected every time with a level of 


sophistication that Macromedia products don't 


always have. There are several usability flaws 
in Flash MX that | raised during Beta 1 and 2 


that were deferred, Since Macromedia doesn't 


usually do point releases, I’m going to have to 
wait 12-18 months for interface hiccups. 

Feature-wise, | think it's right on track. | don’t 
know of anything additional that | need. FEES 
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Video in Flash MX 


Flash MX enters a whole new arena with 
support for embedded video... 


i ith the introduction of Flash 
1 MX comes the ability to 
ti embed video clips directly 


within your Flash projects. 
Macromedia worked with Sorenson to 
develop a new codec called Spark, which is 
designed specifically for Flash. The Flash 
MX authoring tool includes the Spark video 
encoder and the decoder is built into the 
Flash Player. 

Developers using Flash 5 who needed 
video content had few choices. One option 
was to create movie clips containing a 
series of bitmap images. Anyone who has 
used this approach will instantly appreciate 
the power of the new video features with 
Flash MX. The new video playback is 


smooth, the quality is good and the file 
sizes are amazing. 

The great news is that once embedded 
within a movie clip you can manipulate the 
video like you would any other Flash asset. 
So, you can move, mask, and control the 
playback of the video using ActionScript. 
This opens up a whole range opporunities 
for Flash developers to incorporate video 
into less traditional interfaces. 

We're going to start by importing video 
clips in Flash MX. We will then move on to 
using ActionScript to build a playback 
controller that will enable the user to start, 
stop and advance through the video clip. 
The final stop will be looking at masking to 
create a video kaleidoscope. > 
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Expertise provided by Jason Krogh, 
a Flash-based developer and trainer. 
You can contact Jason at 
[e] krogh@zincroe.com, 


Filesondisc — 2 
The movie clip supplied by Artbeats 
canbe foundon the CD root. The code 
needed for this tutorial is on the cover 
CDin the Tutorial\ Video folder. 


Part 1: Importing Video 


Delivering video online is like coaxing an overweight elephant 
through a kitchen pipe... 


Codecs: temporal 
and spatial 
compression 


Acodec is an algorithm used to 
compress and decompress 
video. Cinepak and Sorenson 
Video are examples of popular 
codecs. Two techniques are used 
to compress the video. Spatial 
compression works much like 
JPEG compression to create a 
small description of an image. 
Temporal compression uses the 
similarity across frames to 
squeeze file sizes down even 
smaller. The Sorenson Spark 
codec used in Flash MX employs 
both approaches, 


Video keyframes 


Akeyframe in video compression 
is not the same as keyframes in 
the Flash Timeline. Interframe 
compression takes advantage of 
the fact that a set of video frames 
are often very similar, or that the 
active part of the frame may be 
restricted to a small area of the 
screen. When Flashcompresses 
the video it starts with a 
complete description of the very 
first frame. Subsequent frames 
are then described in terms of 
their differences from this frame. 
The process of looking at all the 
proceeding frames in order to 
render a frame can be very taxing 
on your computer. So, 
periodically, the encoder will 
store a single complete frame 
called a keyframe. 


ay The snowboard.mov clip, supplied by 
Artbeats, which is on the CD root, has been 
reduced in size to 320x240 and the frame rate cut 
to 12.5 frames per second. But even still it is nearly 
16MB — far too large for delivery online. 


nebntatecicen tN isis 
Import options. 
© Embed video in Macromedia Flash document 


‘© Unk to external video file 
(Video will only be visible when movie is exported 
as a QuickTime movie file.) 
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When importing QuickTime files Flash will 

check to see if you want to embed the video 
into your project or link a Flash file to a QuickTime 
file as a new track. Select the embed option. 


Mave view 320n240 pinels, 16292.2 KO 
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Set the frame ratio to 1:1. This will compress 

the video with a frame rate of 12fps whereas a 
setting of 1:2 would use a frame rate of 6fps. For 
online delivery there is rarely a need to use a rate 
higher than 12fps. 


2 | We are going to prepare a simple Flash movie 
containing a single compressed video clip. 
Create a new Flash file then click the stage size 
button in the Property Inspector and change the 
dimensions to 320 wide and 240 high. 


Path zinc Users Jkrogh video snowboard. mov 


Mowe aw: 220x240 pixels, 1622.2 KD 
Length $.56 secs, 12.5 frames/sec 


|B synchronize video to Macromedia Flash document frame rate 


Number of video Irames to encode per number of 
Macromedia Fash feames 1 WW) 


5 | Flash compresses the video when it is imported 
and not when the SWF file is generated. The 
first setting you will come across is the quality slider. 
Set the quality to 85. Values below 75 normally 
result in poor visual quality. 


Don’t show me this message again, 


8 | Imported video is automatically added as a 
library symbol much like bitmaps and audio 
clips. Flash MX will also place a copy on the active 
layer and display an option to add frames to make 
space for the video. 


Kind: Document 

Size: 15.9 MB 

Created: 3/7/02 
ified: 3/7/02 


Select Import from the File menu. If you have 

QuickTime 4 installed, Flash will enable you to 
import video in a MOV, AVI and MPEG formats. 
Select the snowboard.mov file and click OK. 


Mowe sien: 320%240 pixels, 16292,2 Kb 
= Length: $.96 secs, 12.5 frames /sec 


Ly, NPN TE ——| 
6 100 Sorenson 
Spark 


pe ip 
¢ * Pe samamted wore canehiinien, 
Sa GN Sateen ee 
i 100 | ™ retemeoneemapeton 
F synchronize video to Macromedia Flash document ftame rate 
Number of video frames to encode par number of 
Macromesta Fash frames 


6 | Enter a value of 12 for the Keyframe Interval 
and 100 per cent for the scale. The Keyframe 
interval marks how frequently a complete frame is 
stored. A lower value for the interval creates larger 
files but also enables faster seeking during playback. 


9 | Position the newly imported video to align with 
the stage area. You will notice that there is no 
audio playback of video assets from within the 
authoring environment. Use the Test Movie option 
under the Control menu to see (and hear) the 
compressed video. 
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‘Thursday, March 7, 2002 12:00 9M 
320 «240 piel 
5.55 seconds, 330.4 Kb of video date 


10 Select the video asset is in the Library panel 12] 
and use the drop-down menu to open its Oo Another option in the Properties window 

properties. You can use this Property window to enables you to export video symbols to FLV 

reimport the video if you make changes to the video __ files. These compressed video files can be imported 
or want to use different compression settings. directly into other Flash projects. 


Now that we are done let's publish the finished 
SWF. Pay special attention to the audio quality 
settings. The audio track from imported video is 
compressed according to the publish settings for the 
audio stream. 


Part 2: Video Playback Controller 


A little ActionScript can go a long way in creating a sophisticated video 
controller interface. All code required is in the Tutorial\Video folder on the CD... 


cs — 
J) Actions tor Frame 1 of Layer Name actions 


Pr asseorve*} 


3 | Select the first keyframe in the Actions layer 
@ Double-click on the player movie clip to edit it. and open the Actions window. Add the code 
Open the player_start.fla document from the You will see that the first frame is displayed above, which is in the Tutorial\Video folder on the 
CD. This file contains all the interface elements _ while the video is loading and the second is used CD. The first line initiates the load of the snow.swf 
and the basic structure of our video player. once the load is complete. file already created. The next line stops playback. 
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4 | Add the rest of the code here (also on the CD). 


This code calculates the percentage of the 5 | Now advance to the second frame. Notice the G Select the play button and add the code: 
video file which has been downloaded. When the appearance of the three playback control on(press) { 
entire file is loaded it advances the movie clip to the __ buttons as well as the volume slider. Select the stop video.play(); 
next frame. button and add the code seen here. } 
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Part 2: Video Playback Controller continued... 


Go lossless 


Every time the footage is copied, 
digitised or recompressed you 
can expect to see a drop in 
quality. Just as with JPEGs each 
time you recompress the video 
new artifacts are introduced. 
When you need to store digital 
video at maximum quality use 
QuickTime Pro's animation 
codec. This is only practical for 
shorter clips because of high 
file sizes, but it will store the 
video with a lossless 
compression scheme. 


Progressive 
download 


In most cases it is safe to let the 
user start viewing the video 
before the entire clip has been 
downloaded. As with other Flash 
content the video is streamed 
into the player. In this case we are 
preloading the entire clip 
because the usercan scrub the 
video to any point in the video 
right away. 


Flash 


video. gotodnds top1); 


Select the reset button and add the code: 
on(press) { 

video.gotoAndStop(1); 
} 


(Wr Actions tor marker Grub: handle) 


\*+PROvER Re 
S the button events for the scrub butter 


on€press) { 
‘tis. dragging = true; 
this. stortDrogt true, 10,0, 310,0); 
this. crMouseNove = updateafterEvent; 


10 Now add the rest of the code for the marker. 
When the user releases the mouse button we 
stop the drag and remove the mouseMove event. 
Note that Flash MX enables you to use both button 
and clip events on movie clip instances. 
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Now we need to add some code to the volume 

slider. Double-click on the volume-slider movie 
clip and select the volume-thumb movie clip. Add 
the code in the Actions editor. This establishes a 
sound object associated with the video clip. 


Go The horizontal line and diamond shaped 
button are the scrub controller. This lets users 
advance to any point in the video. Double-click the 
scrub movie clip and select the marker movie dip. 


//Rest the video ready for playback 
video. gotoAndS top(1); 


o Navigate back up to the player movie clip and 
select the second keyframe in the Actions 
layer. Add the line of code displayed here. This will 
stop the video playback when it is initially loaded. 


14] Now add the rest of the code for the volume- 
thumb movie clip. Most of this is similar to the 
code used for the Scrub Marker. Note the 
setVolume action used to change the sound level 
after the user has moved the thumb marker. 


‘this, stortrog( true, 10,@,310,0); 
‘this. crMouseMove = updatedfterEvent; 
, 


onCrelease,releaseQutside) { 
‘ths. dragging = false; 
‘this. stopDragt); 
‘this, onMouseMove = null; 
} 


9 | Open the Actions editor and add the code 
displayed above (also on CD). The startDrag 
action enables the user to slide the marker and also 
sets up a mouseMove event to force a screen 
update as the marker is being moved. 


Mereesmertan 4 = Melee. Monel en. cerrertframe 1)*RO/C tal treme ts 
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Now add the remainder of the code displayed 
m here. This code is used to keep the scrub 
marker and the video in sync. If the marker is being 
moved by the user then we queue the video 
according to its position. Otherwise we reposition 
the marker according to the position of the video. 


Now that all the coding is complete, we can try 

the Test Movie option under the Control menu, 
If you run into a problem compare your work with 
the player.fla file in the finished folder. 


Part 3: Video kaleidoscope 


You don't need to be a programmer to have some fun with video in Flash. You can 
apply masks, tweens and colour transforms just as you would for other artwork... 


Spark Pro 


If you're using a lot of video in 


Flash you may want to investigate 


Spark Pro-a video encoder 
which offers improved 
compression options. You can 
find Spark Pro at [w] 
www.sorenson.com/sparkpro. 
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We are going to use the same snowboard 

footage again for this project. Create a new 
document and import the snowboard.mov file using 
the Import to Library option under the File menu. 


a Add a new layer in the Timeline using the 
insert layer button. Name the bottom layer 
video and the upper layer mask. 


Navigate up to the main Timeline and drag an 
instance of the wedge movie clip onto the 
centre of the stage. 


{W synchronize video to Macromedia Flash document frame rate 
Nesenines of video trammes 10 encode per ravenitrer of + 
Macromeda ash tomes (11 WY 
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Open the Library window and create a new 
In the video import window set the quality to movie clip symbol named wedge. Drag an 


100, the keyframe interval to 12 and the size instance of the video clip into the new movie clip. 
to 50 per cent. We won't need the sound so You will be prompted to add more frames for the 
deselect the import audio option. video. Click OK to add the frames. 


G Draw a triangular wedge shape on the mask 
5 | Double-click on the Layer icon to open the layer. The sides of the wedge should be at a 45 
Layer Properties window. Set the top layer to degree angle. Adjust the mask and video so the 
mask and the bottom layer to masked. wedge's tip lines up with the crosshairs on the stage. 


8 | Open the Transform window. With the wedge 
selected enter 45 degrees in the rotate field 
and press the Copy and Apply button. Press this 
several more times until you have eight instances Now use the Test Movie option under the 
arranged around the centre. Control menu to view the result. 


Flash 
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101 Flash Tips 


That's right - 101 hand-picked tips that'll 
get Flash working for you faster, and 


more efficiently... 


lash MX is acomplex program 
that combines authoring, Web 
development, animation and a 
/ drawing package. It’s easy to 
become an expert in a narrow area while 
paying scant attention to other parts of the 
program. So, we've put together these tips 
— 101 of them guaranteed to take you into 
every nook and cranny of Flash MX. 

Our watchword has been workflow; 
these pearls of Flash wisdom are designed 
to get you working faster and more 


efficiently with the package. Your movies 
should benefit too, as they'll now be more 
compact and run better than they did 
before. In our section about including 
other media in your masterpieces, you'll 
get tips on using sound in ways you wish 
you'd thought of eons ago. Plus, our 
Timeline workout will have you working in 
amore organised and effective manner as 
soon as you fire up Flash. Photocopy them 
and tape them up next to your monitor — 
these are the Flash commandments... > 


Flash 


TIMELINE 


Hj Naming Layers 
As you build up your Flash 
movie, make a habit of naming 


each new Layer you create, making sure 
that the name is both descriptive and 
concise. Properly naming Layers will 
cut down on the time you spend looking 
for specific objects or snippets of script. 


| Label liberty 
Use a Label layer to add 
labels to key events in movie 


clips and in the main Timeline — even if 
you don't need to refer to them in 
ActionScript. It helps to keep track of 
what's happening where, especially 
when you have to juggle several clips in 
asingle movie. 


H Action Layer 
Putting your Timeline 
ActionScripts on a separate 


layer labelled Actions is a good idea. 


Hj Layer folders 
Layer folders in Flash MX let 
you organise material into 


categories. Create a folder to put non- 
visible items like Labels and Actions to 
keep them separate. You may want to 
differentiate static stage objects from 
animated elements. 


Quickly access the full 

properties dialog forthe 
current movie by double-clicking on 
the frame rate on the Timeline. 


H 5 Movie Modification 


LIBRARIES 


ij Common libraries 
Go to Window>Common 
Libraries and you'll find a 


range of ready-made objects, graphic 
symbols and sounds ready to drag and 
drop into your own Movies. 


Hj Open as Library 
Add custom Libraries to the 
Common Libraries menu. 


Create a new Flash file and add any 
symbols or items you wish. When you’re 
done, save the file to the Libraries 
folder inside the Flash program folder. 
You can continue adding to the Library 
by reopening the original file in Flash. 


Hj Multiple libraries 
You can open multiple 
libraries in Flash MX and 


easily keep track of them. They 
automatically dock in the main Library 
panel and can be retracted or expanded 
as you wish by clicking on the arrow 
next to the Library label. 


“Putting your Timeline 
ActionScripts on a separate layer 
labelled Actions is a good idea" 


Smooth 
Straighten 
Optimize 
Shape 


Swap Symbot 
Duplicate Symbol 


Swap Bitmap... 
Trace Bitmap. 


Applying the Modify>Break Apart command to text splits it into characters on the first application, 
then transforms those into vector shapes on the second. 


Flash 
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Paint with bitmaps may produce interesting effects, but remember that you'll increase the size of 


your published file. 


19 Shared Libraries 


Shared Libraries are item 
. collections that are stored in 
an external Flash movie. You can 
update items across a range of movies 
using a Shared Library by making any 
necessary changes to the library file 
then clicking Update. 


\j Selective memory 
In Flash MX, if youadd a 
Library item from another 


movie's Library, Flash remembers 
where that item came from. If you later 
update the original movie, the changes 
can be applied to any other movie 


where the items are used. 
ry Quick symbol 
H 1 In Flash MX you're able to 
AD convert any objectinto a 
symbol by selecting it and dragging it 
directly to the library. A dialog enables 
you to select what type of symbol you 
wish to transform the item into. 
A 
nf 2 When importing media into 
; the Library, make it as 


hi-res as you can. You can then 
individually compress items inthe 
Library or set global compression 
options when you publish. In either 
case, this enables you to publish 
multiple versions of yourfiles, targeting 
users with different bandwidth 
requirements if necessary. 
Compression is often accumulative — 
this will help you retain as much quality 
as possible in media files and bitmaps. 


Higher resolution 


DRAWING 


Hi A Bitmap Fills 
i You can use a bitmap as a 
: Fill, and paint with it just as 


you can paint with a gradient or solid 
colour. Import a bitmap into the current 
scene and select it. Go to Modify> 
Break Apart, then choose the 
Eyedropper tool and click on the 
bitmap. The current fill is changed to 
the selected bitmap. 


Hy ig Combining shapes 
il Shapes placed overlapping 

s each other in the same 
layer, which are of the same colour, are 
joined together automatically. An 
overlapping shape of a different colour 
can be used to cut a piece away from 
another shape. Both these techniques 
can be used to create complex images 
using simple elements. 


Group hug 
If you don't intend to edit an 
: image any further, or you 
want to preserve it exactly as it is while 
you work on something else, use the 
arrow to marquee select the object and 
then go to Modify>Group to group it. 
This will prevent you from accidentally 
selecting either the stroke or the fill of 
the object while you work on other parts 
of your project. 


Gradient editing 
Gradient’s can be moved 
within an object using the 
Transform Fill tool in the toolbox. This 
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Drop shadow 
Create a drop shadow under an object by 
creating a duplicate (Command/Ctrl+D). 
While the duplicate is selected, choose a 
dark grey fill colour from the Toolbar. With 
the object still selected, group it by going 
to Modify>Group and in the Colour Mixer 
panel, and set the alpha transparency of 
the group to 70 percent. Place the 


enables you to resize, rotate or change 
the centre of the gradient applied to an 


object on the stage. 
a 

H 8 The vastly improved 

. support for the Fireworks 

PNG format in Flash MX means that it’s 
possible to take advantage of the 
drawing tools to create Flash designs. 
Stick with vector-based designs, then 
import into Flash using whichever 
settings yield the best results. 


Flash in Fireworks 


ty What a smoothie 


You can reduce the 

complexity of an object or 
group by going to Modify>Curves> 
Optimise. Smooth out the object, 
reducing the number of micro-curves. 
In most cases you won't see much 
difference, but you will optimise the 
movie for export — resulting ina 
smaller file size. 


i t) Straighten up 
Select an object and click 
2 


the Straighten icon on the 


duplicate on a layer below the original and 
position it so it's offset by between 4 and 8 
pixels. Go to Modify>Shape>Soften Fill 
Edges and accept the default settings in 
the dialog. Don't try this on objects that are 
too complex as softened edges are made 
up of duplicated, progressively lighter 
vector objects and can add a lot to the 


eventual size of your published file. 


toolbar to iron out any curves. The 
effect is accumulative so you can 
continue pressing the button until the 
effect you want has been achieved. The 
same is true of the smooth button. 


i 
2 1 You can set how round the 
‘E corners of a rectangle are 
using the Round Rectangle Radius 
option button in the toolbar when the 
Rectangle tool is selected. If you 
prefer to set the corner radius visually, 
draw your rectangle and — without 
releasing the mouse button — press the 
up and down cursor arrows on your 
keyboard to alter the roundness of the 
rectangles corners. 


Rounded corners 


iy Pixel precision 1 
To place an object with 
pixel precision, select it 
then enter exact X and Y co-ordinates 
in the Property Inspector. 
iy Pixel precision 2 
Flash MX introduces Pixel- 
Level Snapping. If you 


Having a set of interface components ready to drag and drop into your movies is just the ticket when 
you're pressed for time. All the graphics in component parts are editable. 


One of the most impressive additions to Flash MX is the ability to import video clips directly onto 
the Flash Timeline. Treat converted video as you would any other Flash object. 


zoom into a movie sufficiently, a 1x1 
pixel grid automatically appears, 
enabling you to manually move objects 
into place with pixel perfect accuracy. 
i ? Lines to Fills 

. While lines and bezier 
curves are easy to adjust 
and edit, fills can have gradients, 
textures or bitmap tiles applied to 
them. Just select the line you want to 
convert and go to Modify>Shape> 
Convert Lines to Fills. 


ij ? Bitmap editing 
‘ If you select a bitmap image 


in the Library, you can 
launch Fireworks to edit the image and 
have it automatically updated in Flash. 
If Fireworks is not available on your 
system you're able to specify an 
alternate image-editing package. 


WORKFLOW 


fj You need hands 

s If, while drawing, you find 

that you’re running out of 

canvas or the object you’re working on 
disappears off the edge of the visible 
work area, you can temporarily switch 
to the Hand tool by pressing and 
holding down the spacebar. The Hand 
tool enables you to pick up and move 
the work area around the screen much 
more quickly than scrolling. 
\j , Visual Layers 

9 When working with 
multiple Layers, you may 
sometimes need to isolate elements as 


you work on them. There are different 
ways to do this depending on the type 
of object you’re editing and the number 
of layers in the movie. The quickest way 
to isolate a single layer is to click on the 
Show/Hide All Layers symbol in the 
Timeline, then make the layer you want 
to work on visible. 


Symbolic focus 


If you want to work ona 
Library object, double- 
click on it and you'll be taken to 
Symbol Editing mode, with the rest of 
the movie greyed out. 


Edit in Symbol Mode 


To isolate the symbol in its 
ie own editor, right-click in 

Windows or CTRL-click on the Mac to 

bring up the context-sensitive menu. 
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Choose Edit. 
fe Outlines only 
weal Another way to visually 


isolate individual elements 
is to turn on Outline Mode. Go to 
View>Outlines. Everything on stage is 
rendered as outlines only, with colour 
coding that you can edit by going to 
Modify>Layer. Individual Layers can be 
set to Outline view from the Outline 
column in the Timeline. 


Movie Explorer 


In Flash MX, another way 
to navigate through movies 
is to make use of the Movie Explorer. 
For the best results, go to 
Window>Movie Explorer and make 
sure Show Frames and Layers is 
switched on — this lets you choose > 


Flash 
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Common shortcuts 

Make using Flash easier with these 
commonly required shortcuts: 

V =Arrow/Cursor 

R= Rectangle 

O=Oval 

M=Magnifier 

F5 = Add Frame to Timeline 


which specific frame and layer you want 
to work on without having to scroll 
through the Timeline. 


ie Back and forth 
- When you go to Symbol 
Editing mode or switch to 


another scene, Flash MX displays a link 
back through the preceding screens at 
the top left of the document window, 
enabling you to quickly return to the 
main screen. 


lie Float the toolbar 
- By default, the toolbar in 
I Flash is docked in the 


Windows version of Flash — and it looks 


F6 = Add Keyframe 

F8 = Convert to Symbol 

Ctrl-click + drag = duplicates 
current object 

SHIFT click with Eyedropper = selects 
current colour for both fill and stroke 
Command/Ctrl+1 = Reset view to 
100 per cent 


like its stuck there too. You can float the 
toolbar by clicking then dragging on an 
empty area. This detaches it from its 
docked position, giving you a larger 
work area. 


he Detach all panels 
aes Allthe panels inthe 
Windows version of Flash 


MX can be detached in a similar way, 
including the Property Inspector and 
the Timeline. Use this feature to set up 
the screen the way you like it, then go 
to Window>Save Panel Layout. On the 
Mac, all the panels are already floating, 
except the Timeline window which is 
docked with the stage. 


“Creating separate layouts for 
drawing, animation, design and 
so on will speed things along” 


'p) Clock.! 


The ability to show and hide layers in the Timeline lets you cut out the clutter while you work. 


Bespoke layouts 


Use the Save Panel Layout 
feature to set up panel 
layouts for different tasks. Flash is a 
complex application, and creating 
separate layouts for drawing, animation, 
scripting, design and so on will speed 
things along nicely. 


Ke Keyboard shortcuts 
> Use the Edit>Keyboard 
feature to create key 


combinations that enable you to 
quickly switch between the custom 
panel layouts that you’ve created. You'll 
find it under Flash>Keyboard Shortcuts 
on the Mac. 


\fe Ye ¥ Banish panels 
'@ | ® } When allthe panels in your 
layout are floating, you can 
quickly banish them by hitting the TAB 
key. To bring them back, press it a 
second time. 


Ke Panel parameters 


> To save time while entering 
a lot of parameters ina 
single panel, you can use the TAB key 
to confirm the entry that you've typed 
in, as well as automatically move to and 
select the next parameter that is to 
be entered. 


Leave space 


When creating a new 
movie, always leave the 
first few frames empty. This will enable 
you to put in content like a simple 
loading clip orsplash screen later on — 
but won't affect the flow of the movie if 
you decide against it. 


Edit multiple frames 


Next to the Onion Skin 
icons on the Timeline is a 
little noticed icon that enables you to 
edit multiple frames at once. Select 
this if you need to reposition an 
instance of an object or across an entire 
series of frames simultaneously. 


TEXT 
ij 


Device fonts 

Flash includes three default 
font types that search for 
common font types on a user's system. 
These are _sans (Arial, Helvetica, 
Verdana etc), _serif (Times, Garamond) 
and _typewriter (Courier). Choose the 
font type from the font drop-down as 
normal — there's no need to specifically 
select a Device Font option in MX. 


a Font embedding 
\ Not all fonts can be 
embedded in your Flash 


files when publishing, and when viewed 
on another system the font may be 
replaced by an alternative that may 
change the look of your movie. You can 
determine whether this might be a 
problem by going to View>Antialias 
Text — if the font still looks jagged the 
outline can't be exported. 

One way to make sure that 


A4 
i your type comes out the 


way you intend is to convert text to 
vector shapes before saving by 
selecting the text and choosing 
Modify>Break Apart twice. 


Break apart 


HTML Format 

Flash MX supports HTML 
i\ 1.0 formatting options in 
documents, even within editable text. 
Use the same common sense approach 
to font definitions as you do with HTML 
pages and you won't go too far wrong. 


Fast animation 


bed Quickly place individual 
characters on different 
layers by selecting the text object and 
choosing Modify Break Apart. When 
applied to text this function divides the 
object into separate letters rather than 
shapes in Flash MX. With the 
characters still selected, choose 
Distribute to Layers. Each character can 
then be separately animated. 


ACTIONS 


Allinclusive 


Long ActionScripts can be 
stored as external text files 
with an .as extension. To use them ina 
movie, you'll need to place an ‘include’ 
in the file that points to the file. This 
enables you to reuse complex routines 
in movies, or build up a library of 
common scripts. 


AC Functions 

@ } The ECMA syntax 
introduced in Flash 5 has 
been expanded in MX to the stage 
where you can now predefine your own 
functions in ActionScript. Use the 
function command (find it under 
Actions>User-Defined Functions in 
the Actions Editor) to create a new 


function from a series of commands. 
Use call function to use the function 
later in the script. 


Calling all 


As wellLas calling named 
functions, you can also call 
the script content of a specific 
keyframe in Flash MX — this enables 
you to store reusable ActionScripts in 
sections of your movie and call on them 
when required. 
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Stage manager 


Flash MX enables you to 

H directly control the size of 
the current movie with the stage.height 
and stage.width commands. 


Nice device 
The Capabilities object, 

: found in Objects>Core> 
Movie enables you to interrogate the 
browser your movie is downloading to. 
The range of properties available 
include screen DPI, resolution, colours, 
audio support and so on. Use this to 
serve different versions of your movie 
to different devices, or adjust the 
properties (scaling, audio support) of 
your movie directly. 


Automatic drawing 


The new set of drawing 
functions in Flash MX 
enables advanced coders to create 
vector graphics using ActionScript. 
Animations that mimic real-world 
physics, or draw objects in response to 
user interaction, benefit as you no 
longer have to predefine objects or 
animations on the stage. 


Dimensions: 


wan oe ah. 


SSO px _| (width) 


sae Ce) Eas) Ca) 
Background Color: [1 
tana (ES) 


ruler Units: (Pixels 


In Flash MX you can make changes to the properties of the current movie in either the Property 


Inspector or the traditional Modify Movie dialog. 


A loading screen doesn't have to be fancy - as long as your user knows that the file is on its way and 
you give them something pretty to look at in the meantime. 


Hints 

To get hints on using a 
specific ActionScript 
command within Flash, place the 
command in your script then hover your 
cursor over it to see a pop-up with 
information about its usage. 


MOVIE CLIPS and SYMBOLS 


Movie clip clutter 


Simple animation can be 
embedded ina clip and 
frozen using the Stop command. 
Embed the clip in a movie and use 
the main Timeline to trigger the 
animation. This leads to less clutter in 
your movies. 


} 


Load Movie 

The Load Movie command 
doesn't just work for 
Movies, it can be called within Movie 
Clips too. You can use this knowledge 
to replace Movie Clips on the stage 
dynamically by loading in a new SWF 
format clip from an external source in 
response to user actions or events in 
the Timeline. 


Clip hierarchy 

Flash movies can have 
many levels and the same is 
true of Movie Clips. If you choose the 
default ‘Level 0’ to load the new clip 
into, it'll replace the current content of 
that clip. Selecting Levels 1 or above 
will leave the content of the clip in 
place and simply superimpose the new 
clip over the top. 


Speed things along 
Although Flash unloads 
movies automatically from 
the targeted level, explicitly adding the 
Unload Movie command speeds the 
process along. You can also use the 
command to clear levels below or 
above where you place new content. 


‘@ ) Surplus symbols 


® | @ } atthe end of abig 

I animation project you may 
find yourself with several extra symbols 
that aren't actually used in the movie. 
You can get rid of them by going to the 
menu in the Library panel and choosing 
Select Unused Items 


Use Folders 


Create folders to store 
common symbols together 
to make them easy to track in complex 
movies. You may want to create 
separate folders for text, bitmaps, 
buttons and so on, or it may be more 
valuable for you to place all the parts 
that went into the creation of a specific 
clip in one folder. 


’ 


Stop 


had Remember that movie 
clips loop by default. That 
means that you'll need to put a Stop 
action in both the first and last frames 
unless you want them to loop forever in 
your movie... 


Full paths 

When publishing movies 
that include external 
content, alter URLs so that they > 
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Hotspots 
Flash doesn't have a hotspot function, but 


you can mimic one by using a transparent 


button symbol. Turn off line drawing by 


selecting the line drop-down in the Colour 
Mixer and clicking on the No Colouricon. 


Draw a shape around the area that you 
want to make hot; it’s best to use the Pen 


tool to do this so that you can get an exact 


contain the full path to clips and other 
external items to increase reliability. 


i 


Symbolic gesture 


Create generic symbols that 
can be reused. A blank 
rollover button can be given a new text 
label when an instance is dragged to 
the screen from the Library, and an 
instance of direction arrows can be 
rotated on stage to create a new button. 


Graphic symbol 


Transform all your graphics 
into symbols and name 
them. This makes it much easier to keep 
track of them in the Library and Movie 
Explorer. They can also be more easily 
isolated for editing as symbols. 


match to the area. When you've drawn the 
area, go to Insert>Convert to Symbol and 
choose Button as the symbol type in the 
dialog that appears. Double-click on the 
shape to go into Symbol Editing mode 
and set the Alpha transparency of the 
button to 0 per cent in the Colour Mixer. 
Hotspots are ideal for complex image 
areas and bitmaps. 


\ Quick components 


The UI Components in Flash 

MX are smarter than you 
might think. To create a scrolling text 
field, for example, draw a text box on 
the stage, change it to Dynamic Text or 
Input Text, then drag and drop an 
instance of the ScrollBar component to 
the stage. Align the top-left edge of the 
ScrollBar with your text field and the 
component will snap against it, resizing 
to the dimensions of the text field. 


ij Long division 
If your movie is composed 
of a series of interactive 


pages that each contain their own 
unique set of scripts, think about 


“Transform all your graphics into 
symbols and name them to keep 
track of them" 


J 


= = 
2 oo Auto Kern 


eT var 


Why embed the whole font when you only need half of it? In Flash MX you'll have to click on the 
Character button to enter the dialog that enables you to edit how fonts are embedded. 
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}~ root.onEnterFrame = functionO { 
i /{ Creare an instance of the Date object 
~ myDate = new DateQ; 
fi 
/frotate clock Hands and shadows 
hourHand._rotation = myDate.getHours(*30+(myDate.getMinutes0/2); 
hourHandShadow._rotation = myDate.getHours0*30+(myDate.getMinutes(Q)/2); 


minuteHand_rotation = myDate.getMinutesQ"6 +(myDate.getSecondsQ/10); 
minuteHandShadow._rotation = myDate.getMinutesQ"6+(myDate.getSeconds(/10); 
secondHand._rotation = myDate.getSecondsQ*6; 

secondHandShadow._rotation = myDate.getSeconds()"6; 


center 

center 

hourhand, <hourhand> 
hourhand, <hourhandshadow> 
minutehand, <minutehand> 


SHSHLHLaS . 


minutehand, <minutehandshadow> 


The Movie Explorer gives you a hierarchical view of all the elements present in your movie. 


breaking them down into separate 
movies. Use the loadMovie 
ActionScript command to load each 
segment as required (in response to 
user input). This will make your movie 
load much faster and conserve 
processor power. 


Bookmarks 


As wellas placing labels in 
movies and movie clips, 
you can now put bookmarks in Flash 
MX authored movies. These let your 
users click on the back and forward 
buttons of their browser to revisit 
sections of your movie. 


CLICHES 


Text Zoom 

Avoid Zooming Text. Flash 
enables you to zoom in and 
out of scenes at any level of 
magnification — that’s the power of 
vectors. The first time someone 
realised that you could do that with text 
it looked pretty good. The wow factor 
wears off pretty quickly though. 


i Spotlight 

Forget those spotlight 

effects. Flash enables you 
to create a layer mask so that you can 
show one small part of an image at 
one time. Lots of designers have used 
this to create spotlight effects where a 
search beam highlights bits of the 
image. Now that you can control 
masks using ActionScript, you should 
expect more. 


Gradient spheres 


The gradient sphere is the 
classic computer art cliché, 
but it’s a simple 3D effect. 


i 


Looping animation 
Just like animated GIFs 
before them, some people 
use Flash to create short animation 
sequences that loop forever and ever 
and ever... try not to be one of them. 
After a while it can begin to get on 
your nerves. 


The pointless 
splash screen 


a For all the wonderful things 
that Shockwave Flash can do and has 
been used for, it’s still popular for 
creating intro screens to Websites. If 
your splash screen downloads quickly 
and adds to the experience of using the 
site, then great. More often than not 
they’re just there for the sake of it. 


STREAMLINING MOVIES 
ij Two stage launch 
Keep the initial file size 


s super small. You can use a 
stub movie to load in background 
graphics quickly which then calls a 
second external movie if you have a lot 
of bitmap graphics, scripting ora sound 
track to load. 


Get out clause 

Make sure that your intro or 
splash screens have a 
button that appears, as the rest of the 
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Bitmap to Vector 
Convert simple bitmap images to vectors 
using Flash’s Trace Bitmap function. Select 
the bitmap you want to convert, then go to 
Modify>Trace Bitmap. Adjust the settings 
according to the result you want: the less 


complex the final vector conversion, the 
smaller the resulting file size will be. 
Curve Fit decides how smoothly the 
outlines of the shape will be preserved, 


file downloads so that users can skip 
past any non-essential sections. 


Loading screens 
Simple loading screen 

ti solutions include a looping 
animation or small bit of text telling the 
user the size of the file with a estimated 
download time. 


Individual. 
compression 


Flash enables you to set 
general compression options for sound 
and bitmaps on export. You can tweak 
the individual settings for bitmap and 
sound objects within Flash by selecting 
the object in question in the Library, 
then choosing Properties from the 
Options menu in the panel. 


\ Smaller with symbols 
Try bringing down movie file 
sizes by constructing 

animations using generic shapes that 

you've converted to graphic symbols. 

Draw simple shapes like circles and 


while Corner Threshold does the same for 
sharp edges. The Colour Threshold slider in 
the Trace Bitmap dialog sets the level that 
Flash will use to generate colour areas. 
Setting the Colour Threshold to 10 will 
mean that Flash will treat two pixels with 
colours that have a RGB colour variance of 
10 as though they were the same. You can 
enter a value between 1 and 500 — the 
higher the value, the smaller the file size. 


generic triangles and choose 
Insert>Convert to Symbol to place 
them in the Library. Build up 
components in a scene using them. 


} Scale up 

Save file space by creating 

your movie at a smaller size 
than you intend it to be displayed in the 
users browser. When you embed the 
file into a Web page, set the dimensions 
larger than the original stage. You can 
create a movie at 150x100 then scale up 
to 600x400 in the Web page. This 
works best when your movie is 
composed entirely of vector objects. 


Own devices 


Using Flash device fonts 

\ keeps down the eventual 
size of the published file by taking 
the font information direct from the 
user’s machine. 


} Partial embedding 


In the Property Inspector 
while text is selected, you 


When your movie is composed of vector shapes you can save valuable bandwidth by creating it ona 
small stage in flash and scaling it up in your browser. 


or 


Flash MX now has a full ActionScript reference panel built in. Go to Window>Reference to launch 


j 
Action; deletes a movie clip instance that was created with the attachmovie 
@uplicatemowieclip methods of the MovieClip object, or with the 
| duplicatemovieclip action. 


it, or take advantage of the context-sensitive hints in the Actions editor. 


can choose to only embed those 
parts of the font that are going to be 
used in your movie by selecting 
Character and typing the letters you'll 
need into the dialog. 


Reduced fonts 


The more fonts that you use 

ina movie, the more that 
will need to be embedded and the 
larger the resulting file size will be. Try 
using one main font for content and 
breaking down headers and logos into 
vector shapes. 


ANIMATION 

| Shape Hints 
Use Shape Hints when 
tweening from a simple 


shape to a more complex one, like a 
letter. To use them, select the first 
keyframe in a shape-tweened 
animation sequence, then go to 
Modify>Transform>Add Shape Hint. 
Move the Shape Hint to the point you 
want to mark. Go to the last keyframe 
and add a corresponding hint. Continue 
alternating between the first and the 
last frames as you add further hints. 


Logical placing 
Shape Hints work best if 

| you place them in the same 
logical order in both frames. That 
means making sure that the sequence 
of numbered hints is the same at both 
ends of the transition. Failing to do so 
can generate some odd effects. 


Named tweens 
Turn shapes or groups into 
movie clips before you 
animate them with tweening. Flash 
does it automatically for you, but the 
naming system it uses (tween!, tween2 
etc) can soon clutter up your library 


with symbols that it’s difficult to keep 
track of. 


Ghost objects 


If you use Tweening to fade 
out an object with Alpha 
transparency, the object's final state 
may still be faintly visible on screen on 
some systems. Place a frame with the 
object removed in the Timeline after the 
fade to get rid of ghosts. 


Balance the load 


The more separate items 
you have animating on 
screen at any one time, the more load 
you'll put on your user’s computer. Try to 
plan ahead and stagger the triggering of 
clips in your movie. Minimise the 
number of distinct items that are 
animating simultaneously. 


Break it down 

Long animation sequences 
can be managed more 
easily if your break your movie down 
into separate scenes. There's a 
tendency to overlook this capability, 
but Flash makes it easy to communicate 
data between scenes, so there's no 
reason not to use it. Storyboard your 
animation and create a new scene 
whenever there's a natural break in the 
action or a new background. 


MEDIA 


Streaming sound 
We Flash movies can play back 


89 at different speeds over 

a different systems, making it 
difficult to synchronise soundtracks. To 
deal with this, adjust the properties of 
your sound and set the Sync option to 
Stream. If the animation slows down, 
Flash will drop frames to stay in sync 
with the audio. > 


Flash 


Dynamic media 

Both MP3 and JPEG files 
can now be in placed Flash 
MX movies as external media which 
are called during runtime. Use this 
feature to keep initial files sizes to a 
minimum or create movies with 
updateable elements. 


Loop the loop 


Short snippets of looped 
sounds reduce file sizes 
and improve performance in 
comparison with long clips. You can 
download free, ready looped sounds 
from Flash resource sites like 

[w] www.lashkit.com. 


Video 


Video imported using the 
new Sorenson compression 
option in Flash MX can be easily 
manipulated using the same tools as 
any other object. This means you can 
distort it, resize, scale or skew video, 
applying those effects to the entire 


sequence simultaneously. 
Try not to trigger a large 


193 
} sound file at the same time 


as important animation events. Sounds 
take a moment to initialise — and could 
delay the playback of the movie while 
you're waiting. 


Sound and vision 


PUBLISHING 
} Modify movie 

| You can now modify your 
basic movie settings 


without going to the Modify menu. Just 
click away from any objects and the 
Property Inspector lets you change 

the background colour, dimensions, 
frame rate and publication settings for 
the movie. 


Browser resize 


Flash movies are vector- 
based and therefore 
scaleable by nature. If you link directly 
to a Shockwave Flash file, it will 
automatically resize to the dimensions 
of the user's browser. Alternatively, 
you can go to Publish Settings and 

set the movie dimensions to a 
percentage of the browser window 

in the HTML file your movie is 
embedded within. 


Bitmap integrity 

jj Prevent bitmaps embedded 
in resizable movies from 
distorting by ensuring that 

they are given absolute dimensions 

rather than percentage-based 

attributes in Flash. For best results, 

ensure that images are placed 

within your Flash movie at their 

original dimensions. 


“Short snippets of looped 
sounds reduce file sizes and 
improve performance..." 


New Symbol... 

New Folder 

New Font... 

New Video 

Rename 

Move to New Folder... 
Duplicate... 

Delete 

Edit 

Edit with... 
Properties... 
Linkage... 
Component Definition... 


Expand Folder 
Collapse Folder 


Expand All Folders 
Collapse All Folders 


Shared Library Properties... 


Keep Use Counts Updated 
Update Use Counts Now 
Help 

Maximize Panet 

Close Panel 


It's easy to miss - the Select Unused Items option can be found in the menu of the Library panel. 


Flash 


Straighten 
Optimize... 


Swap Symbol. 


Duplicate Symbol 


Swap Bitmap. 
Trace Bitmap 


Transform 
Arrange 


Convert Lines to Fills 
Expand Fill... 
Soften Fill Edges... 


Use Shape Hints to guide complex tweened animations, but be careful or you could end up with 


more of a mess than you started with. 


Retro save 

You can use all the 
enhanced development 
capabilities of Flash MX and still 
export to Flash 5 format to ensure that 
your movies play on as many platforms 
as possible. Some features may not 
be supported. 


Consistent playback 


Flash movies may play back 
at different speeds on 
different systems. If it’s important that 
you get consistent playback speeds, try 
placing a short, looping sound file in 
your main movie. Set the sync option to 
stream and make it loop for the length 
of time you want your movie to last. This 
hack takes advantage of Flash’s sound 
streaming features that will drop 
frames if necessary to synchronise the 
movie to a sound file. 
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Sound pieces 

A long soundtrack can add a lot to the 
bandwidth overhead for your movie. If you 
really want music playing in the 
background, try to break it down into its 
component parts. Most tunes are made up 
of repeated phrases. In a sound editor try 
to break your soundtrack into an intro, 
verse riff, chorus riff and fill sections. You 
can then trigger and loop these sections in 
Flash to recreate your soundtrack without 


On report 

To generate a 
comprehensive report 
detailing the impact that various 
objects in your movie have on the 

size and performance of the finished 
file, check the box labelled Generate 
Size Report in the Flash Publish 
Settings dialog. 


Development 
features 


If you haven't used many 
of the new development features of 
Flash MX in creating your movie, you 
should consider publishing your file in 
Flash 5 format. As more users install 
the new Flash Player, this tip will 
become less relevant. But, for now it 

is worth considering that the majority 
of your users will probably still be 
using Flash Player 5. 


having to load a huge file. Make sure that 
all your pieces are of a uniform length so 
that you can mix and match between them. 
Asimilar approach is to use the 
channels in Flash MX to loop separate 
instrument tracks. Create one loop with a 
bass part, one with a drum section, and 


others with differing melody lines. As long 


as they're all in the same key and the same 
length, you should be able to loop them, 
overlaying sections to create new tunes. 
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Atticmedia 


From an attic flat living room to spacious offices in Islington, Atticmedia has come a long way. 
Its secret! “Mixing technology and interaction in a completely new way...” says CEO Mark Weber... 


hen Atticmedia opened for business in 
the lounge of Mark Weber’s attic flat 
some six years ago, Baddiel and Skinner 
were singing about three lions ona shirt 
and the Conservatives were still in power. Since then, 
the change from Tory sleaze to Labour spin may have 
been barely perceptible, but fortunes at said digital 
media company have definitely changed for the better. 
Its philosophy of offering technology-led design 
proves popular with clients like the BBC, Channel 4, 
PriceWaterhouseCoopers, Dazed & Confused, Viacom 
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and Ribena, to name a few. Founder Mark Weber 
believes that Flash is one piece of the jigsaw the 
company couldn't live without (along with Director and 
Shockwave). The team regularly produce games, 
Websites, animations, promotions and educational 
content in its bid to make the world more interactive. 

Mark thinks his team has the edge over the others 
as everybody on his staff has practical experience. He 
says: “We started as an enthusiastic bunch of 
programmers and designers; we're self-funded and 
have grown through new clients and projects.” Its 


40-odd staff now reside in Islington: “We've always 
specialised in combining technology with design — 
knowing about the technology, but at the same time 
making things look as good as possible,” explains 
Mark. “Combining Shockwave and Flash with server 
side technologies is important to us.” 


The F-word 


Ah yes, Flash. Atticmedia is enthusiastic in its use of 
Macromedia's flagship, even though it thinks that 
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there's still plenty of room for improvement. Mark 
continues: “Director is still my favourite software for 
the sheer versatility of Lingo — but once Lingo is in 
Flash, then it will win...” And there are many recent 
projects that have been given the company’s 
Flash/Shockwave treatment, not least the Tracy 
Beaker site forthe BBC and the Soundplan project. 
Mark says: “The Tracy Beaker site for Children's 
BBC is aimed at 6-11 year olds, and is an enormous 
Website of over 80 Flash-based activities.” The team’s 
brief was to make the site educational, but in a fun way 
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that would draw kids in. “It was a great challenge: kids 
play games, see animations and then write stories. 
Tracy Beaker is a site that’s all about content — it’s fun, 
entertaining and lively.” 

Another ongoing Flash project is Soundplan, a game 
that Atticmedia has produced to promote business 
entrepreneurship in the UK. “The game is a virtual 
reality world where you play the role of the band 
manager,” enthuses Mark. “But even though the game 
is virtual, the bands are real.” Does this mean he’s 
about to spawn a few more Nikki Chapmans and 


1. Still in development, Soundplan 
is a virtual band management game 
where you manage a real band 
within a virtual world. The whole 
team are excited by the 
commission, which aims to 
promote grass roots music, uses 
real bands and gives kids an insight 
into the industry. The project 
utilises Flash, ASP and SQL Server. 


2. An online training tool for a firm 
of trainee financial brokers, this 
project was two years in 
development and took a lot of work 
— it provides 60 hours of training in 
all. The team used Director, Flash, 
HTML, JavaScript, PHP and XML 
to put it together, and Mark says the 
finished piece went way beyond the 
client's expectations. 


3.“A fun engaging promotional for 
Jimmy Neutron and Dairylea 
Lunchables,” is how Mark 
describes this piece of work that 
takes in the likes of Shockwave, 
Flash, HTML, JavaScript, ASP and 
SQL Server. The project had a large 
team and a very tight schedule 
(three months) - there's hours of 
gameplay on the site. 


Take it from the experts — here are 
Atticmedia’s top Flashhints... 

1. Get the illustrators to export to Flash. Even opening 
up /llustrator takes ages. 

2. Use shared libraries — it's a major memory saver. 

3. Have a folder of any code you've done, with well 
named file names. Then you can easily find code to be 
reused again. 

4. Save every major change as a new file - space 


is cheap, and Flash files are small. It's not uncommon 


for us to have more than 150 versions of a game by the 


time it’s finished. It means that any mistakes can be 
easily rectified. 

5. Buy some decent JavaScript books. They'll stick to 
just the code better than the Flash books out there, 
which try to cover everything. 

6. Get a printer. Sometimes you need to print out code 
to look at it properly, and get a pencil to go with it. Go 
and sit somewhere away from the computer. 

7 Agood night's rest makes a major Flash problem so 
much easier. A problem you're completely confused 
about at the end of the day can often be solved with in 
a few minutes with a fresh head. With coding, breaks 
are essential. 

8. Check code constantly. 

9. Start off small and break down a problem. There are 
a lot of different ways to get to the final work, but it’s 
best to start with paper and a plan. Build one bit of 
programming at a time, check it, then add to the whole. 
10. Get some memory. Without a decent amount, Flash 


testing is a nightmare. 
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4. Another Flash project, JuiceUp sponsors an 
online TV station, and this is the Website of 

the kids running the TV station. They want your 
help to contribute material to be featured on 
JuiceUp TV. “It's lasted about ten months and 
still has a loyal audience,” says Mark. “But 

with hindsight, we'd like to have done more with 
the characters.” 


5. A promotional microsite for Cheestrings, this I 
also tied into the Nickelodeon site. Atticmedia Competition 
employed the powers of Flash, HTML and Terms and Conditions 
JavaScript in the month-long project, and also 
composed the music, which Mark says was a lot 


of fun. 
; Simon Cowells? Not quite. “We're auditioning for ASP/SQL server 7 and other server side technologies 

6. For this project, the team was asked to b ae d we'll lecti hand b Flash G d UltraDevt \ ith 
produce two RAF games — each took two months ands to join us, and we'll be selecting ten bands to be - Flash Generator and UltraDev for a start, along wit 
to complete. The games, Search and Rescue and featured in the first game - allofthem unsigned-and | HTML, JavaScript, Dreamweaver, Director, Flash, 
T.A.L.O. (Tactical Air Land Operation) were _ they'll be promoted by the game.” Photoshop and Illustrator. And it says there are pluses 
produced using Shockwave with 3D effects with Such a not-for-profit funded game — aimed at and minuses to all software. One key thing that the 
Flash, HTML and JavaScript. “It was very easy to F ; F r x F 
get carried away in the whole virtual reality of promoting grass roots music talent and teaching kids whole company would like to see solved in future 
these games,” laughs Mark. about the music industry — is as far removed from Pop versions of Flash is the debugger. “It’s poor and 

, : Idol as you could get, and Mark is excited at being difficult to use, to say the least,” says Mark. “If 
7. The Website for the BBC's Tracy Beaker took involved. He sees it as a step in the right direction for you've got serious arrays it can even freeze or crash 
the team six months to complete, and included ; E si 
more than 80 adventures, each containing an both the company and the Internet, where content is you out. Plus, it refreshes on each frame, meaning 
animation, game and story writing activity. The king and it’s entertainment for a mass audience. “It’s you can't get to the bottom to view values. It’s a 
site, produced to aie saengew oly beena lot of work, but it's the future,” he adds. major headache.” 
pate tory EE Sen Yay epee omar Other work the company has done is varied. Try a Mark also states that Flash doesn't work well with 

virtual reality simulation training programme for Illustrator, but the team uses Fireworks or Photoshop 
8. Two months in the making, this is a PriceWaterhouseCoopers, the build of the Flash/Flash for compression, and they’re happy using Soundforge. 
promotional game for Wall's Fruit 5s on Generator engine for the Dazed& Confused Website, a “Cooledit is very helpful as well”. The company also 
Nickelodeon. So far, the Flash-fuelled feast had _ = A 5 : 
clocked-up hundreds of thousands of vistors, Ribena desktop character, interactive kiosks for favours Macs over PCs, and — like vodka and red bull 
and Mark is pleased with the result as the Trouble TV, as well as numerous online games for — the other must-have item to go with your Mac is 
deadline for the project was tough. companies such as Lost for Channel 4, to accompany Photoshop. “| don't remember who said it, but the 
the TV series of the same name. sentence ‘Photoshop is the best game for the Mac’ had 


something right!” he laughs. As for Flash into the future 
— well, Atticmedia hasn't used Flash for iDTV or PDAs 


Game on yet, but Mark reckons that time will come within the 
Gaming is a major part of what Atticmedia does, both next year. 

for educational and entertainment purposes. And “These are exciting times in the industry, and we're 
creating games has been enhanced by the company's only just beginning,” he concludes. “We want to work 
favourite part of Flash — the scripting. “With Flash 5 with anyone who will buy into an interactive vision, and 
and the JavaScript type code, Flash can make high as a company we'd like to have some influence over 
level games now,” state Atticmedia’s Flash designers how the Internet develops.” EEE 


and programmers. “We can build an entire game 
without even touching the work area.” Games are 
usually Flash content in a Shockwave shell. Atticmedia 
sorts the ideas, concept, design, coding and hosting, 
and its games often get a few hundred thousand users. 
To create its smorgasbord of work, the team 
employs a whole bunch of software and technologies. 
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What 
With OOP (Object Orientated Programming), 
an object is basically just a collection of 
attached methods (which are functions 

that are assigned to your object) and 
properties (values). 


Use the arrow keys to move the man 


oe In the example here, the man object is 
first placed on the stage, and given an 
instance name of man. 


Prototyping a MovieClip 


Why 

When creating objects, ActionScript keeps 
their individual components separate. So an 
object functions independently of others, 
meaning increased speed of execution (fps). 


For example, a function becomes part of an 


2] We then create Man Class, this is just 
an empty constructor. 

Manclass = function(){ 

} 

We then assign Manclass’ prototype to 
that of MovieClips, therefore getting all its 
functionality (for example, Flash’s 
MovieClips methods are made available to 
Manclass). This is done by: 
Manclass.prototype.__proto__ = 
MovieClip.prototype 

The man's prototype is then set to that of 


Manclass (which is itself set to MovieClips). 


This means the man object has MovieClip 
methods available to it. 
_root.man.__proto__ = 
Manclass.prototype 


object and is called using “this”, instead of 


lots of calls to one function. 


How 
When an object is constructed it inherits (gets 
passed down) its properties from its class 


We can now set the methods 

for Manclass. 
Manclass.prototype.canMove = 
function(xDir, yDir){ 
// Code that checks to see if can move. 
} 
Manclass.prototype.move = function(){ 
// Code that moves object. 
} 
These can therefore be called directly by 
the man object like this: 
this.canMove(xValue, yValue) 
this.move() 
- where “this” refers to the man object. 
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constructor, and this is done with the 
prototype property. It is possible to override 
where an object looks for its prototype. The 
——Proto__ points to an object's prototype 
that it wants to use. 


Conclusion 

We now have a self-contained object (or 
number of objects) that have inherited and 
can use these new methods, as if they were 
normal MovieClip methods, like 
—droptarget(), play), gotoAndPlay() etc. By 
using prototyping you can redefine built-in 
Macromedia MovieClip object's methods, for 
example, giving all MovieClip objects _x 


more functionality or built-in intelligence. 
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Flash gaming for 
Pocket PCs 


Learn how to develop pocket-sized games 
that really perform. We explain how to deal 
with the foibles of the format and walk you 
through the development of a Pong clone... 


3 he release of Macromedia’s 
( Flash 4 Player for portable 
platforms has come just at 
the right time, as portable 
computing is becoming more affordable, 
powerful and popular. 

In this tutorial, we're going to write a 
version of the classic bat and ball game 
Pong for the Pocket PC. We'll also look at 
movie settings and fonts and file sizes 
needed in developing for this platform. 

The Flash 4 Player can be used on all 
PPC (Pocket PC) platforms, which opens 
up a new format for Flash developers. 
Unfortunately, the combination of low 
CPU power and numerous 
inconsistencies between portable and 
desktop players have deterred a lot of 


would-be developers. However, despite 
these drawbacks, the format is still new 
and exciting. By following some simple 
pointers and getting used to the 
capabilities of the PPC, fun, high- 
performance Flash movies can be 
developed quickly and easily. 

This tutorial is written in Flash 5—a 
demo of version 5 is on the cover CD. > 


Part 1: Getting started 


Creating a Flash movie for your handheld is easy, use the files in 
the Tutorial\Handheld folder on the cover CD to help you... 


Version confusion 


Macromedia has only released a 
Flash 5 Player for the Casio 
Cassiopeia. All other PPC 
platforms can only run Flash 4 
movies. It makes sense to stay 
with version 4 to ensure your 
movie can run on all devices. 


Frame rate 


The frame rate you can achieve 
ona PPC is usually very low. A 
movie with a lot of ActionScript 
and complex graphics might run 
as slowly as 4fps. Even simple 
movies are unlikely to run much 
faster than 10fps. As with desktop 
platforms, the power of the 
different PPCs varies, 
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ay First, create a new Flash movie. Right-click the 


stage and set the dimensions to 225x250 Next, select File>Publish Settings>Flash, and @ Add four layers. Organising your layers is 
pixels. This is a typical resolution for Pocket PC 2) select Flash 4. All but one PPC only run Flash 4 important, especially as the movie will feature 
devices. Also set the background colour to black and _ only, so if you're using the Flash 5 editor, you must a lot of ActionScript. We'll keep ActionScript, labels 
the frame rate to 10fps. do this for your movie to run correctly. and graphics separate where possible. 
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4 Add seven keyframes, a suitable space apart 
(five or ten frames). Label these frames splash, G Add a splash graphic on the Interface layer and 

start, init, game, pause, win and lose. These will be a simple button to take the user from the 

the main sections of our game. splash screen into the game. 


G Next, add the first piece of code to the movie, 
which is on the cover CD. We will use Expert 
Mode to edit the script. The Play button uses an 
on(release) event to jump to the start label. 


Part 2: The bat and ball 


We now need a bat and ball to play our game... 


Code required 


Allcode required for this tutorial 
is on the cover CD in the 
Tutorial\Handheld folder. Unless 
stated otherwise the code can be 
found in the code subfolder. 


| 3 | have two balls and a bat. Align all three 
symbols to the centre of the stage. Set the top 
bat's Y value to 30, the ball’s Y to 125 and the 
lower bat to 220. 


eg Create a white square of 20x20 pixels on the = - 
game layer. Make this keyframe run from the Ez Create another white rectangle of 40x10 pixels 


start label to the end of the pause label. Select the 


in the same keyframe. Hit F8 and convert this 
square and create a new symbol called mcBall. 


to a symbol named mcBat. 
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Select the frame after the game label, on the Create another small white box off-stage, in 
4 | Select the top bat and set its name in the 5 | code layer. Add the command to the same keyframe as the bats and ball. 
Instance panel to batCPU. Set the ball's gotoAndPlay(“game"); - this is our main game Convert this square into a button called 
instance name to ball and the lower bat's name to loop. Publish your movie now, and check that you buttonKeyTest. This will be used to register key 
batPlayer. We now have our clips to manipulate. have a splash screen and a (static) game loop. presses, and is not to be seen on the stage. 


Part 3: Setting up the variables 


Adding a momentum effect to the bat and ball... 


PPC Resources 


The official Macromedia PPC 


development homepage can be 


found at [w] www.macromedia. 
com/software/flashplayer/ 
pocketpc. This includes an FAQ, 
the Flash player for supported 
devices, a development guide 


and example movies. 


Fonts and file size 


When using text, remember that 
file size is paramount for PPC. 
development. Dynamic text 
fields should use Tahoma, as this 
is a standard PPC font and will 


be reproduced well. 


Create a new keyframe on the code layer that Add a new keyframe on the code layer on the Select the dummy button and these two 

lasts from start to init. This is where we will set same frame as the game label. Add the code to functions. This uses the value set in the start 
up all the variables to use throughout the movie. update the player's bat position which is on the CD block and connects it to the variable we used in the 
Add the ActionScript batSpeed = 10; in the game.txt file to add a momentum effect. game update loop. The code required is on the CD. 


G The control of the bat will require repeated 


Create a white box to the dimensions and G Publish the movie now. Click on the Play key presses, as Flash 4 can't detect key 
position shown in a new keyframe on the button, to see the basis of the game. After releases. It's also possible to move the bat right off 
Interface layer. Delete the fill from this box and about a second, pressing the left and right cursor the game screen, as we haven't written any collision 


group it. This frame indicates the game's play area. keys will move the lower bat. code yet. 


Part 4: Adding the text 


Use the provided code to add text to your game... 


Button issues 


Pocket PCs use a stylus rather 
than a mouse, so buttons work 
differently to normal Flash 
movies. Rollover frames in 
buttons do not work at all, and 
mouse-down frames are only 
shown for one frame, when the 
button is released. 


Test, test, test 


Be sure to test your movie onan 
actual PPC regularly. You can tell 
how well your movie will really 
run and avoid over complicating 


your movies. 


Add the code from start.txt in the 

Tutotial\Handheld folder on the cover CD to 
the ActionScript that's in the start block. This is a 
long list of useful definitions needed for the game. 


Duplicate both text fields in the lower-right 
corner of the stage. The new static field should 
read PLAYER SCORE: and set the variable name of 
the second dynamic field to textScorePlayer. 


Tahoma as the font. Make the text bold and 12 
points to make sure it will be legible on the PPC. 


Add a piece of static text as shown. As it will 
be followed by a piece of dynamic text, select 


Insert a piece of dynamic text, aligned with 

CPU SCORE. Give this the variable name 
textScoreCPU, uncheck Selectable and use the same 
font and size as before. 
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Create and group a black box as shown. Use 
Modify>Arrange>Send To Back to place this 
behind the text. Duplicate this box, set the Y 
coordinate to 244 and send it to the back. These 
blocks act as a quick and simple mask. 


Insert the script from the CD to the code layer 

beneath the init label. Whenever this is run, it 
will pick a random direction for both the X and Y 
axis of the ball's movement. 


Part 5: Updating and checking the movie 


Perform these easy tests to make sure that everything is in order... 


== aa TSRREE 


Ay Update the code on your game update frame. 
The code required is in the game.txt file in the 
Tutorial\Handheld folder on the cover CD. At this 
point you should use the code to update the player's 
bat position, collide the player with the walls, 
update the ball's positon, test for collision with the 
right wall, and test for collison for the left wall. 


test is made in the X axis. The ball is given more 
speed if it hits the edge of the bat. We need to add 
the code to update the player's bat, collide the 
player with the walls, collide with the player, collide 
with the CPU, update the ball's position, test for 
collision with the right and left walls. 
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These tests check if the ball is at a suitable 
height for a collision with either bat. Another 


€ Now we add some life to the CPU player. The 
script moves the Al player to seek the ball and 
uses the same tests we added for the player's bat to 
collide the bat with the left and right walls. 


More than meets 
the eye 


Running Flash 4 movies on your 
desktop computer (which is 
likely to have the Flash 5 Player) 
can be very deceptive. Many 
Flash 5 Action Script commands 
will execute in a Flash 4 movie 
run on the latest player, but will 
not execute on the PPC. Test 
any new code on the PPC as 
often as possible. 


The last addition to the game loop is a test 
whether a goal has been scored. We need the 
code from game.txt titled to check if ball has got 
past player and check if ball has got past CPU. This 
is added after the other code. If the ball has slipped 
past either player, it jumps to the pause frame. 


Take a copy of the text fields from the main 
game section and place them in a new 
keyframe on the game layer, running from lose to 
win. At the end of a game, this will show you the 

final score. 


G Create a new keyframe at the end of the pause 
block and add the code for this step from the 
CD. When the end of the pause is reached, the 
script will either initialise another round or jump to 
the appropriate end frame. 


GAME OVER! 
You LosT! 


2 Insert a new keyframe that runs the length of 
the lose label. Add some suitably abrasive 
static text to be shown above the final scores. 


6 | Now we need to reset everything at the start of 
each round. Add the code from the init.txt file 
in the Tutorial\Handheld folder on the CD to the init 
section. The last three lines speed up the action from 
one round to the next. 


WELL DONE 
YOU WON! 


9 | Next, add a similar range of frames for the win 
section with some congratulations. 


Part 6: The finishing touches 


The final steps to complete your Flash movie... 


Quality 


The Pocket PC Flash 4 player is 
only capable of running at 
medium quality. Even if you set 
your movie to high quality, it won't 
perform that way. Unexpected 
jaggies and a lack of anti- 
aliasing can be an unpleasant 
surprise the first time you test 
your movie ona PPC. 


WELL DONE 
YOU WON! 


as To make the game flow correctly is a button to 
take you back to the splash screen. Like the 
score text, this button is common to both the win 
and lose sections. Add this, then save and publish 
your movie. 


Internet Explorer for the PPC uses different 

HTML to embed Flash movies. The code above 
is the simplest template that will work on a PPC. 
Replace all references to the SWF file with your own 
filename. The code, ping_ppc.fla is on the cover CD 


e OLR : 
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a Your finished game should now run on both 


your desktop computer and a PPC. Make sure 
you copy the Flash and HTM files to your PPC and 
install the Flash Player to test your game. 
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Optimising your 
Website for 
search engines 


You've built an impressive Website, 
now all you need is traffic. We talk 
you through the search optimisation 
process to get your site listed on the 
major engines and directories... 


ow do you drive traffic to 
your site? You could spend 
hours manually submitting 
your site to each individual 
search engine. Or you could pay an 
online service to register your site, but 
you willincura hefty service fee. Or 
you could use automatic site 
submission software. What do you do? 

Search engines are the main way for 
Internet users to find Websites, which 
is why a Website with a good search 
engine listing may see a dramatic 
increase in traffic. Many Websites 
appear poorly in search engine 
rankings, which is often because of a 
lack of consideration of how search 
engines work. It’s important to prepare 
a Website thoroughly to get noticed on 
the Web. 

Search engine optimisation is the art 
of ensuring that your Web pages are 
accessible to the leading search 
engines. They are focused in ways that 
help improve the chances of the 
engines both seeing your site and 
ranking it well. Even though the rise in 
paid participation programs offered by 
search engine sites has become 
popular, free search engine submission 
is still possible. However, using traffic- 


building programs will speed up the 
listing process and almost certainly 
generate more search engine-related 
traffic for your Website. Offline 
businesses all have basic start-up 
costs, such as phone bills, Yellow Pages 
ads and so on. For online businesses, 
directory submission fees are part of 
the basic start-up costs, just like 
domain name registration and hosting. 


What is a search engine? 


The term search engine is often used to 
describe both crawler-based search 
engines and human-powered 
directories. These two types of search 
engines gather their listings in very 
different ways. 

Crawler-based search engines 
create their listings automatically. They 
crawl or spider the Web, and create a 
large index of your site, which Web 
surfers search through when they 
submit a search string. If you change 
your Web pages, crawler-based search 
engines can take quite a while to 
recognise these changes, and this 
affects how you are listed. How you 
build your pages can have a great 
influence on the results. 


*You are using Meta tags to help make up 
for the lack of text on your pages, not as a 
way to successfully anticipate every 
keyword variation a person might enter 
into a search engine. 

* Frames can kill - some of the major 
search engines cannot follow frame links. 


Itis possible to use JavaScript to find all 


a 


Yahoo! depends on editors for its 
listings. Users submit a short 
description to the directory, and editors 
review your site and either accept it in 
the listing or reject it. A search in 
Yahoo! looks for matches only in the 
descriptions submitted, and changes 
that you make to your Web pages have 
no effect on your listing. A good site 
with good content is more likely to get 
reviewed for free than a poor site. 

A hybrid search engine will favour 
one type of listing over another. For 
example, Yahoo! is more likely to 
present human-powered listings, 
however, it does also present crawler- 
based results (as provided by Google). 

Crawler-based search engines have 
three parts. First is the spider, also 
called the crawler. The spider visits a 
Web page, reads it, and then follows 
links to other pages within the site, 
after this has happened the site is 
described as having been spidered or 
crawled. The spider returns to a site 
every month or two to look for changes. 
Everything the spider finds goes into 
the index of the second part of the 
search engine. 

The index is sometimes called the 
catalogue and contains a copy of every 
Web page that the spider finds. If a Web 
page changes, this index is updated 
with new information, but it can take a 
while for new pages to be added to the 
index. A Web page may have been 
spidered but not yet indexed and, until 
it is indexed, it is not available to the 
search engine. The search engine 
software is the third part of a search 
engine. This is the program that does 
the work of using the millions of pages 
recorded in the index to find matches 
to a search and rank them in order of 
what it calculates to be most relevant. 


How are Web pages ranked? 


One of the main rules in a ranking 
algorithm is the location and frequency 
of keywords on a Web page. How do 
you think people will search for your 


the relevant HTML in a frameset, but 
unfortunately its not guaranteed to work. 
*Keep your Meta tags as high up as you 
can inthe HTML, and changes for different 
pages in different sections on your site. 
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* Never spam the search engine with 
repeated keywords in your HTML, keep 
them in context. 
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Traffic Builder provides you with an 


your Web promotion efforts, but with no 
service fees. 

i Web Site Traffic Builder is available in 
two versions: Gold and Platinum. The 


and a range of functionality, such as 
automatic site submission, a page 


optimiser, position ranking software, a 
t Meta tag editor and a traffic analyser that 
‘ 


your Website. 
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Web page? The words you imagine your 
potential visitors typing into the search 
box are your target keywords. 

Place keywords in crucial locations 
on your Web pages. The page title is 
most important. Failure to put target 
keywords in the page's title is the main 
reason why perfectly relevant Web 
pages may be poorly ranked. You 
should repeat these keywords in the 
first few paragraphs of the homepage. 

Search engines will check to see if 
the target keywords appear near the top 
of a Web page, such as in the headline, 
or the first few paragraphs of text. The 
assumption is that a relevant Web page 
will mention these keywords right from 
the start of the code. 

Frequency is the key factor in how 
search engines determine relevancy. A 
search engine will analyse how often 
keywords appear in relation to other 


package features an easy-to-use interface 


enables you to track and analyse traffic to 


efficient and effective solution to promote 
your Website, giving you more control over 


Prices: “| 
Traffic Builder Gold - $199 (£140) i 
Traffic Builder Platinum - $349 (£245) | 
A free trial is available for download from | 


[w] www.websitetrafficbuilder.com. 
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words in a Web page. Those with a 
higher frequency are often seen as 
more relevant than other Web pages. 

Each separate page in a Website 
should have different keywords that 
reflect the page's content. This will 
make a site more relevant for different 
searches. For example, a Website about 
the postal service will have keywords 
such as Royal Mail or letter. The site 
may also contain another page about 
the history of stamps, for which the 
keywords could be stamp history. Pick 
phrases of two or more words, fora 
better shot at success. 

Tables can push text further down 
the page, making keywords less 
relevant because they appear lower on 
the page. This is because tables break 
apart when search engines read them. 
Large sections of JavaScript can have 
the same effect. 
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Get your site listed with the major search engines, like Google ([w] www.google.com). 


© 7002 LookSmart, Lt. All ights reserved 
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The LookSmart home page, at [w] www.looksmart.com promotes MSN's main listings. 


Reflect keywords 


Changing your page titles and adding 
Meta tags is not necessarily going to 
help your page do well for your target 
keywords. To do well in the ranking, 
your keywords need to be reflected in 
the page's content. 

You need HTML text on your page. 
Search engines can't read graphics, 
which means that they miss out on text 
that might make your site more 
relevant. Some of the search engines 
willindex ALT text and comment 
information along with Meta tags. To be 
safe, use HTML text whenever possible, 
and keep ALT tags to a minimum. 

Do not try to spam search engines by 
repeating keywords in a tiny font orin 
the same colour as the background to 


When you launch a new site, you want it to 
appear in search engines right away. You 
can do this, but you'll need a budget. By 
paying an inclusion fee to some of the 
crawler-based search engines, you can 
shorten the usual month delay of a few 
days. These one-off fees are the fast track 
to getting listed. Google, Inktomi and 
AltaVista can all be fast tracked. 

You can also subscribe to a mass 
submission tool like Microsoft bCentral 
Submit It! from [w] www.bcentral.com. It 
has some great features: 


Site listing guarantee 


Guaranteed listings with search engines 
and directories such as AOL, MSN, Hot 
Bot and iWon. 


make the text invisible to browsers. 
Apart from the fact it’s not good 
practice, some engines have got wise to 
the service and may not list you. 
Designers often create image map- 
only links from the homepage to inside 
pages. However, search engines cant 
follow these links and won't be able to 
get inside the site. As most descriptive, 
relevant pages are often inside pages 
rather than the homepage, this is 
search suicide. To solve this problem 
you can add HTML hyperlinks to the 
homepage that lead to inside pages or 
sections of your Website. You can place 
these links at the bottom of the page. 
You can also make a site map page 
with text links to everything in your 
Website and submit this page, which 


Site preparation 

There's the readiness check to find and 
solve site problems before submission, 
and the keyword analysis ensures that 
keywords are formatted properly in all 
Meta tags. 

Site submission 

These functions include master 
submission form for multiple sites, special 
interest search engine and directory's 
submissions, and an automatic 
resubmission and update program. 
Reporting and analysis 

Reporting and analysis enables you to site 
readiness reports, site submission 
verifications as well as the useful site 
ranking reports. 


will help the search engines locate 
pages within your Website. 


Build links 


Every major search engine uses link 
analysis as part of its ranking 
algorithms. By building links you can 
help improve how well your pages do in 
link analysis systems. Link analysis is 
not about popularity; it’s not an issue of 
getting lots of links from anywhere. 
Instead, you need links from relevant 
Web pages that are related to the topics 
that are covered in your site and what 
you want to be found for. 

Here is how you find those good 
links: go to the major search engines 
and search for your target keywords. 
Look at the top results. Visit those 
pages and ask the site owners to link to 
you; not everyone will, especially 
competitive sites. However, there will 
be non-competitive sites that will 
link to you, especially if you offera 
link back. 

Most search engines will index the 
other pages from your Website by 
following links from a page you submit 
to them. But sometimes they miss, so 
it's good to submit the top two or three 
pages that best summarise your 
Website. It can take between one 
month to two months for your non- 
submitted pages to appear ina search 
engine, and some search engines may 
not list every page from your site. 


“It's good to submit the top two 
or three pages that best 
summarise your Website" 
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The Sprite Interactive search results use Traffic Builder's built-in Web browser to search AltaVista. 
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“Meta tags are part of the ranking 


The minimum budget 
How much should you budget? You 


need enough to cover submission to the 


key human-powered search engines. 
Two of the three most important 
human-powered search engines or 
directories charge one-time 


submission fees: 
Yahoo! £199 + VAT 
LookSmart £149 + VAT 


You can get listed without spending a 
penny, but at the very least, we highly 
recommend you to budget enough to 
cover directory submissions. 

Yahoo! is the Web's oldest directory, 
and still its most important. Getting 
listed with Yahoo! is absolutely 
essential to any site owner. Yahoo has 
two submission options: Standard, 
which is free; and Yahoo Express, which 
does require a submission fee. 

Anyone can use Standard 
submission to submit for free to a non- 
commercial category. You'll know the 
category is non-commercial if the 
reverse bar containing its name at the 
top of the category page is blue. If you 
are submitting for free to a non- 
commercial category, click on the 
Suggest a Site link that appears at 
the bottom of the category page that 
you would like to submit to. A 
submission form will appear, fill it out 
and that’s it. 
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Yahoo! ([w] www.yahoo.com) - the oldest and most important search engine for any site owner. 
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Promote your site without the service fees at Traffic Builder at [w] www.trafficbuilder.com. 


You can find the Yahoo! Express 
Submission Form at [w] http://add. 
yahoo.com/fast/add?+Business. From 
there, Yahoo! editors will choose a 
category for you. So all that’s left is to 
fill out the form that’s presented. 

LookSmart provides the main 
listings used by the popular MSN 
Search service, and LookSmart's 
listings are also distributed to other 
search engines. A listing with 
LookSmart is also important for any site 
owner. LookSmart, like Yahoo!, has a 
free submit option for its non- 
commercial categories and a paid 
option for its commercial ones. 

The LookSmart submit page is at 
[w] http://submit.looksmart.com/ 


The Open Directory 


The Open Directory is a volunteer-built 
guide to the Web, and it provides the 
main results to the important AOL 
Search service. The directory also 
powers results for a variety of other 
important services. 

Your submission to the Open 
Directory is absolutely free. 
Unfortunately, that means there's no 
guaranteed turnaround time for getting 


accepted. To submit, locate the 
category you want to be listed in, then 
use the Add URL link that appears at 
the top of the category page and fill out 
the form. If you are accepted, you 
should see your site appear within 
about four weeks, if this doesn't happen, 
you will need to resubmit. 

Meta tags are what many Web 
designers assume are the secret to 
propelling their Web pages to the top of 
the rankings. Not all search engines 
read Meta tags and, in addition, those 
that do read Meta tags may chose to 
weigh them differently. Overall, 

Meta tags can be part of the ranking 
formula, but they are not necessarily 
the secret ingredient. 

Meta tags can also help you provide 
keywords and descriptions on pages 
that lack text — examples of these are 
splash pages and frames pages. 
However, simply including a Meta tag is 
not a guarantee that your page should 
suddenly leap to the top of every search 
engine listing. They are a useful tool, 
but not a magic solution. 

There are several Meta tags, but the 
most important for search engine 
indexing are the Description and 
Keywords tags. The Description tag 


Some search engines have problems 


generating pages via CGI or database 


delivery, so you should create static pages 


as landing pages for the search engines if 
possible. You can use the database to 


update some of content on these pages, 
| but make sure that the overall HTML page 
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is not dynamic and avoid symbols in URLs, ; 
especially the ? symbol. Any database that ' 
uses forms to interrogate data must have 
landing pages, as search engines will not 
use forms. Building mini sites that have an 
index with physical links to the data can 
be one way of overcoming this. 


returns a description of the page in 
place of the summary that the search 
engine would create, the keywords tag 
provides keywords for the search 
engine to associate with your page. 

You need to have written a 25-word 
or less description of your entire 
Website. This description should make 
use of the two or three key terms that 
you hope to be searched for, and it is 
essential that the description you write 
does not make use of marketing hype. 
Here are Sprite Interactive's Meta tags: 
Description: Sprite Interactive is a new 
media company providing an integrated 
marketing approach. Our approach 
blends design with consultancy and 
digital marketing. 

Keywords: New Media, Sprite 
Interactive, Sprite, Interactive, 
Communications, Digital, CD-ROM, 
Internet, Interactive Kiosks, Intranet, 
Extranet, Screen Saver, Cross Media, 
Cross Media Solutions, Internet, 
Brochures, Corporate Literature, 
Presentations, Interactive 
Presentations, Search Optimisation, 
Digital Marketing, Online Promotions, 
Consultancy, Games, e-magazines, 
Games Library, Print Media, Fetcham 
Park, Integrated Marketing, Design, 
Web Design, Information Architecture, 
Copywriting, Multimedia, CD 
Business Cards, Technology, WAR 
Integrated Magazines. 

Let us assume you have a page 
without the tags. The page is titled 
Sprite Interactive with a header that 
says, “Sprite Interactive is anew media 
company providing an integrated 
marketing approach. Our approach 
blends design with consultancy and 
digital marketing.” The company logo is 


Traffic Seeker enables you to add, edit and 
remove your own engines and create 
custom databases so you have complete 
control over your Website submissions. 
This powerful software gives you the 
ability to submit your site and drive traffic 
to it with ease. The software has a built-in 
scheduler, Meta tag creator, link popularity 


checker, doorway page creator and FTP 


uploader as well as automated scheduler 
to set automatic search optimisation 
updates to occur at set intervals. 


Prices 
There are three versions of TrafficSeeker 
available to drive traffic to your site: 
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Guide traffic to your site with the help of Traffic Seeker - [w] www.trafficseeker.com, 


used as a link at the bottom that says 
“enter.” Search engines that index this 
will return a listing like this: 
Sprite Interactive: Sprite Interactive is a 
new media company providing an 
integrated marketing approach. Our 
approach blends design with 
consultancy and digital marketing. 
Notice how the description matches 
what is in the Description tag. That's 
exactly what the Meta Description tag 
does, but it enables you to control the 
description that appears. 


Meta robots tag 


The following tag enables you to specify 
that a particular page should not be 
indexed by a search engine: <META 
NAME="ROBOTS” 


Traffic Seeker Platinum - $199 (£140) 
Traffic Seeker Pro - $99.90 (£70) 
Traffic Seeker Standard - $69.90 (£49) 


There is also a free download trial version 
with limited functionality available from 
[w] wwwtrafficseeker.com 


CONTENT="NOINDEX”> To keep 
spiders out simply add this text 
between your header tags on each page 
you don't want indexed. All the major 
search engines support the robots.txt 
convention of blocking indexing. If you 
use a robots.txt file there is no need to 
also use Meta robots tags. 

They are also known as portal pages, 
jump pages, gateway pages and entry 
pages. Doorway pages are easy to 
identify because they have been 
designed for search engines, not for 
humans. Doorway pages are created to 
do well for particular phrases. 

There are various ways to publish 
doorway pages. One way is to create 
and submit a page that is targeted 
toward a phrase, this makes the page 
very generic and they are easily copied. 
These copied pages can be resubmitted 
by individuals who are mimicking any 
success you may have by directing 
traffic to their site. Your pages may 
be treated as duplicates and 
automatically excluded by the search 
engine from its listings. 

Another problem is that users don't 
arrive at the goal page. If, for example, a 
user did a search for New Media and 
the doorway page appears, the user 
would click through the results, but that 
page may lack services details. This gap 
between the entry and the goal page is 
where bridge pages and jump pages 
come from as these pages either bridge 
or jump visitors across the gap. 
However, with these tips in mind, 
getting listed will be easy. 


Flash 


Chock out Iggy Pop at Spe on Tucsday wight on Channel 4 


1. Flam Jam created a Flash microsite for the Channel 
4 TV show The Priory, with a view to building it into a 
bigger site for the new series of the show. “They 
wanted something that was easy to maintain and was 
more on brand for The Priory,” reflects Hoss. 


2. This is a new site for a theatre in Glasgow 

([w] www.tramway.org). Flam Jam created it in 
conjunction with top Scottish design firm, BDTank. 
“It's a very technical site, an MX site actually” says 
Hoss “We used a lot of the new features. We took a hit 
in the time it took to produce this, but we'll be able to 
use the code for future projects because the code is 
completely abstracted from the animation in MX.” 


3. “7-26 is a direct marketing company,” says Hoss 
“The people there are really cool and we wanted to 
reflect some of their personality. They do a great job 
but they don't take themselves too seriously. So we 
created a Zen garden, for when all the marketing 
bollocks becomes too much for you.” 


4. Hoss says that the concepts are more important to 
the company than the tools. “A lot of our stuff comes 
from observing what's going on around us. This game 
is an example of that. It's just a game about flicking 
beer mats. No surprises where that idea came from,” 
he says. 


5. This CD-ROM was produced for Business Objects, 
an international business software company with 
offices in 160 countries. “Traditionally, we might have 
done this using Director but we felt Flashwas 
sufficiently robust and extensible to do the job on its 
own,” says Hoss Gifford 


6. “This was the first job we did as Flam Jam,” 
remembers Hoss “It's a great site aimed at selling 
toilet seats. Unfortunately, it never went live but you 
can see it in the portfolio section of our Website.” 


7.“Rock, scissor, stone is the most stupid game that 
ever existed,” opines Hoss. “We were doing some 
really in-depth games for BBC Choice and decided to 
do something incredibly simple. This is simple but 
hugely addictive. Try it.” 


Flash 


Welcome to your Zen Garden. 


Drag the cursor on the sand to 
make your pattern and drag the 
rock icons on to the sand to 
position them. 
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A GAME ABOUT FLICKING BEERMATS 
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INSTRUCTION! 


GHT BEERMATS; 0 


FLICK THE MAT 


SHARE & 


Barbed Wire Pieces 

Don't be footed by appearances, this seat is as smooth as a 
baby's bottom. But, hey, forget the baby, it's your bottom 
we're interested in, 


Flammable 


“Spank The Monkey was launched at Flashforward in Amsterdam 
last year, and the following weekend it was downloaded more 
than 700,000 times. Think about it - that’s ridiculous.” Flam 
Jam's Hoss Gifford demonstrates the power of Flash... 


f Flash could save the universe, you'd find 
Hoss Gifford and his Flammable Jam team 
involved somehow — probably applying the 

i finishing touches to some super-hero code. 
For the past two years, this Glasgow-based new media 
outfit has been pushing the envelope and cutting many 
an edge, turning Flash into a powerful branding and 
marketing force for a powerhouse of clients including 
The Edinburgh Film Festival, BBC Choice, The Priory, 
Toyota, and Scottish Widows. 

It's a full-on, big name list, but Hoss isn't one to 
shove it in your face. “We aren't impressed by big 
names,” he moots, “it’s the person that commissions us 
and the briefs they write that we are really interested 
in.” But Flam Jam is lucky enough to have only worked 
with big brand names. 

The five founding members came from one of 
Scotland’s top new media firms where they were used 
to working with international clients on high-profile 
jobs. When they left to form Flam Jam to focus on 
funky Flash stuff, a lot of their clients moved with them. 


Client base 


But being born with a good client base hasn't made 
Flam Jam unappreciative. “We get really good briefs 
from insightful clients that give us scope to push the 
technology, and each other, really hard. Having such 
good clients that really believe in what we are doing 
makes Flam Jam a great place to work,” says Hoss. 
Hoss is happy that his clients share Flam Jam's 
belief that Flash is the best tool to achieve their goals. 
Mind you, Flam Jam has the experience to prove it. The 
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company’s talented individuals have done the full 
multimedia dance, creating viral campaigns, Websites, 
CD-ROMs, and Web games. They're even dipping their 
toes into interactive TV and wireless applications, 
albeit in an R&D capacity. “Basically [we do] any 
digital, screen-based medium that we can get our 
hands on that allows us to build our clients’ brands 
online,” says Hoss. 

But that almost makes Flam Jam sound like a 
hum-drum company. Flam Jam is different. It has 
personality. In addition to a sticky name, the company 
possesses a quirky sense of fun, mixed with a canny 
sense of what works and what can work for its client. 
A quick glance through its project titles is enough 
to raise a chuckle. There's Trash Hotel — the 
tossing-tellies-out-the-window game and 
Beermat-— a flicking beer mats game. Perhaps the 
company's masterpiece is a peeing-in-the-urinal 
game for S1 Play ([w] www.siplay.com/takeaim) 
although Hoss is rather partial to Spank the Monkey, 
a game that he created for VectorLounge — 

[w] www.vectorlounge.com. 

“Spank The Monkey was launched on a Thursday 
evening at Flash Forward in Amsterdam last year, and 
the following weekend it was downloaded more than 
700,000 times. Think about it — that’s ridiculous,” he 
says with just a smidgen of pride sneaking through his 
modest exterior. 

Flam Jam's work isn't just funny or superficially 
slick. “The unique quality of a Flammable Jam project, 
more often than not, is based on the concept,” 
explains Hoss, losing some of his bashfulness. “We 
like to pervert the traditional viewpoint on things, > 
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Wardens are the disease... He's the cure. 


Walter Pigeon had an idyllic childhood. Every morning he 
and his family would fly out from their roost in a disused 
warehouse in Romford to feed on the tasty morsels left on 
the streets of London. 


Then one day their home was ripped down to make way for 
an NGP car park and the family was left roostiess. 


His father turned to drink and the family tell apart. Walter 
swore he would take revenge on every traffic warden that 


HANGOVER OVINDALOO STING QTOE OSORTED 


drop the standard marketing bollocks, and honestly 
reflect the way things are.” 

It all helps Flam Jam's reputation as the ‘mad 
bastards from Glasgow,’ as Hoss laughingly puts it. It’s 
a reputation clients seem to love. “But the big thing is 
that clients feel comfortable putting their brands in 
our hands. They can see we've done work for Toyota, for 
example, and they know their brand is in safe hands.” 


Fluent in Flash 


The company’s competence using Flash has helped 
accentuate this reassuring environment. The 
technology plays a major role in almost everything 
Flam Jam does. They've been using the program since 
version 3 and there's little they don't know about it. 
“With Flash 5, we got to that really comfortable 
Position of being able to do most stuff without thinking 
too hard about how we were going to do it,” reflects 
Hoss. “The good thing about this is you can 
concentrate on what you want to do to achieve your 
clients’ objectives, rather than getting caught up with 
what you are capable of doing. When you aren't fluent 
with a technology, it is all too easy to get excited about 
the technology itself rather than what it can do. Once 
you get your shit down pat, it is much easier to focus.” 
When he isn't knee-deep in code, Hoss is either 
talking about Flash at industry conferences, writing 
books about Flash, crafting technical reviews of Flash, 
or officially testing Flash MX for Macromedia. 
According to this grand master of Flash, version MX 
rocks. “It's lush,” he enthuses. “It fixes all the things 


Watering hole 


that pissed us off about Flash 5, and gives us the 
vast majority of our wish list for new features. We've 
been using it fora few months now, and there is no 
going back.” 

“A lot of work has gone into subtle things that 
dramatically improve efficiency of workflow — 
especially on larger projects,” he continues. “The other 
big thing is the ability for us to truly abstract our code 
engines from the graphics and animations. It’s a code- 
head's dream. It also helps us stay profitable as a 
company, because building projects in this way makes 
code highly reusable.” 

Flam Jam is currently making the most of MX’s 
advantages creating a couple of small Flash Websites. 
After he's written a tutorial about using video in Flash 
MX for Macromedia's magazine, Hoss will be starting 
on a full-blown branding campaign for an Edinburgh- 
based publishing company. And in the midst of it all, 
there's test work for a major Flash-related project fora 
major company that he can't elaborate on, but he 
assures us that it will be hugely exciting. 

So is saving the world on the cards for the future? 
“Our balls may be big, but they aren't made of crystal,” 
jokes Hoss “The one thing we've learned is anything 
can happen, and although you can try and steerina 
general direction, you've got to take new opportunities 
as they appear and go fora wander every now and 
then.” Just so long as Flash is there for company. EE 


Flammable Jammer Hoss takes you through the making of the game's soundtrack... 


The soundtrack is an important aspect of animation or 
games. The urinal game for S1 Play had to sound like you 
were relieving yourself into an aluminium urinal. The 
realistic sound effects were created with ActionScript. 


“| started off by recording the sound of water being 


Poured from a bottle into my kitchen sink,” explains Hoss. “I 


recorded three samples from when the water was being 


poured onto the left, middle, and right of the sink. 


The Flash movie attaches three samples to three sound 


objects: pish_left, pish_mid and pish_right. A function 


continually checks the x position of the mouse and adjusts 


the volume of each sound object accordingly. “When the 
player aims all the way to the left, the pish_left object is 
played at 100 per cent volume, and the other two at O per 
cent. As the aim moves to right, the volume of pish_left 
decreases and the volume of pish_mid increases.” 


“The code means that wherever the aim is in the 


urinal, the volumes of all three samples always adds up to 
100 per cent, giving the effect of a truly 3D sound. Isnt 
technology wonderful?” 


1. This is a game for anyone who hates traffic wardens. Be a pigeon and see how many you can poo on. The sound effects in this are 
hilarious. “Sound is so integral to the stuff we do. We put a lot of work into it,” says Hoss. Flam Jam tend to use Sonic Foundry’s ACID 
and Soundforge to create their own sounds and make use of free sound samples found online. 


2. “We did this when we were experimenting with putting video into Flash,” explains Hoss. “It's actually a series of bitmaps in Flash 
made to look like video. Now, using MX, we'd actually use video, the file size would be smaller and the video would be smoother. Using 


video in Flash MX is a doddle.” 


3. “This is a really good concept,” says Hoss “It's about somebody on a swing that falls off. The idea came when we were being 
photographed for an article appearing in The Scotsman. We went downa swing park and played on the swings, We were swinging really 
high and | got scared. | think I've lost the lack of fear you have when you're young.” 
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XML in Flash MX 


You say tomato, | say <entity name="tomato"/>. 


Power up your static Flash MX with a little XML 
spice in this real-world tutorial... 


et's face it. Dynamically 
updating sites are what 
clients want — and they 

i want them cheap. With 
Flash MX, you can deliver them, and 
include all the usual design flare 
expected of a Flash-based product. 

We've teamed up with the fledgling 
second generation new media agency 
Webziggy to bring you this tutorial which 
demonstrates how to set up a site in 
Flash MX using a Web server that 
delivers database content as XML. It’s a 
technical job, to be sure, but puts a lot 
more power at your fingertips. Using 
similar techniques, you'll be able to 
deliver Flash sites to clients that enable 
the clients themselves to update the 
actual site content. 

The tutorial is based on Webziggy’s 


site for A-Bomb, which is at 

[w] www.a-bomb.co.uk. Webziggy has 
kindly set up a dummy XML news feed 
that you'll be able to use within your 
ActionScript. They'll show you how to 
access that within the Flash MX 
interface and put some finishing touches 
to the Flash movie and tell you about 
publishing your movie and the security 
implications surrounding that. 

There is also a small supporting site 
for this tutorial, which you will need to 
visit to set up your dummy XML news 
feed. You can access it at [w] http:// 
share.webziggy.net/. The site will be 
kept up to date as feedback comes in 
from readers about the tutorial. So, let's 
get started. It’s quite straightforward. > 


Flash 
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Part 1: Setting up your XML news feed 


Get all of your data to be used on your site ready, so it can be 
pulled into and manipulated within Flash MX... 


Which browser? 


It's best to use Netscape 6.2, or 
another standards compliant 
browser when viewing XML on 
the Web, However, you'll find IE 5 
or greater is okay. Don't worry if 


you can't see anything in step 5, 
Flash MX will still be able to 
retrieve the XML. The supporting 
Website should work okay on 
Netscape 6.2, Netscape 4.7x, 
and IE 4+ on PC and Mac — but 
this hasn't been tested to 
breaking point. 


Propeller-heads 
unite! 


To generate a unique ID, you need to supply 

Providing the News Feed like this ay Visit [w] http://share.webziggy.net/ and read an email address and a name. Please note that 
enables you's alicbenatily the first page, finally clicking through to the we need a unique email address, so if we set up a 

sta ihe leah a News Feed set up page ([w] http://share. news feed using [e] bobb@somewhere.com then you 
ae webziggy.net/generate_newsfeed.asp). Since our will be unable to set up another feed using that 
wiouteoner MOWieday: Flash movie will be pulling XML data from this site, email address. In the screenshot we have supplied 
Rroweve, liven go the we will need to set up a unique ID, and subsequent _[e] alan@webziggy.net. We next hit the button 
supporting (Reese Vl Iasey- screens will help you do this. marked Generate. 


share.webziggy.net/, you will find 
a Propeller-heads section. It 
explains how you can set up a 
local copy of the Database and 
XML feeds using Microsoft 

IIS 5, Microsoft Access, and 

spot of Active Server Pages 

in JavaScript. 


What is XML? 


It's a way of sharing data, a way of 
marking data up. If you like, XML 
is to data what HTML is to text. 
Where HTML marks up text and a 
browser reads and understands it 
to present the text visually, XML 
marks-up data which a client 


(browser) understands and can 
use - it enables you to delineate 
fields rather like in a database. 


XML is much more than this, If everything is okay, you'll get a window like 

but it gives you an understanding | 4 | the one above telling you that everything is G Further down this Web page you'll see a link to 
for the tutorial. to read more set. The important thing here is that you make a your own unique admin page. This page is 

info about XM, head to the note of the unique ID the site has generated for essentially what A-Bomb sees when it wishes to edit 
Propeller-heads section of you. In the example here, it's 30. its News section. 


[w] http://share.webziggy.net/. 


cnewsentries total="4" error="false” userid="30"> 


2E+ + Shot + by + Terry+ Gilliam+ and. 


2£1+ Surround + Sound+ mixes +for+ 


F 27s+highly + acciaimed+nev + album%e2E" /> 
Use your browser to go to [w] http://share. 


Depending on the speed of your Internet 

connection, you may see another page at this 
point. This page, called Creating your datafeed, is 
where we have to set up the datafeed. Check the 
Status field, which is on an orange background. The 
server will update this field with important 
information about what it's doing. If this phrase 
appears on your screen “Error: Not a unique email 
address please go back and try again", then hit the 
back button on your browser and enter a different 
email address. 


Try editing one of these news articles. Pick a 

row and make some editorial changes. Hit the 
green button on the right to submit your changes. 
We've made a change to the title of the first news 
article, try putting your name in there, this will 
appear in your Flash movie. Further down you can 
add a new article. 


<entry date="7-Mar-2082" title="Recent + projects +%3A+Peter+Challis’ 
content="Peter+has + just + finished + work +on+Nike%27s + %27Secret + Tournament% 
27+film%2C + due +to+ air+ globally + throughout +the + World +Cup+seasan% 
a+star%e 


<entry date="12-Nev-2001" Utle="Recent + projects +%3A+Paul+Frankiand’ 
content= "Paul +Frankland%27s + soundtrack +to+Lowe + Lintas%27 + Sure+%22Pilot%~ 
22+ film%2C + directed + by +RSA%27s + Chris + Hartwill% 
2C+is+ currently + airing + throughout + Europe" /> 
<entry date="12-Nev-2001" titie="Recent + projects +%—3A+Max+Richter’ 
content="Max-+Richter%—27s + recent + compositions + include +two+tracks+for+M% 
26C + Saatchi%27s + Sainsburys + Taste + TV +campaign% 
2£++The + films +feature+George+ Stephenson + and + Guy + Fawkes +and+ are+directed+by 
<entry date="12-Nov-2061" title="Recent + projects + %3A+Peter+ Challis’ content="Peter% 
27s+recent + projects + include + sound+design+and+5% 


27s + short +film+to+ promote + recording + artist + Stina +Nordenstam% 


webziggy.net/news_get.asp?userid=XX. 8 | Have a look through the XML above. Here you see what was in the fields on your admin page 
You should put your user ID where we have XX represented in XML. Note that each article has been extracted into <entry> nodes with attributes 
in the URL. For example, it should be something for date, title and content. XML is similar to HTML, except it is far more powerful. The content for each 
similar to [w] http://share.webziggy.net/ article has been URLEncoded so that it doesn't prove a problem within the XML. There are other ways to do 
news_get.asp?userid=30 — the feed we just set up. this, but this is the easiest. 
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Part 2: Flash, ActionScript and XML 


Use the supporting files on the cover CD in the Tutorial\XMLFlashMx 


folder when working along with this tutorial... 


Need files? 


We would recommend creating a 
new folder on your desktop, and 
copying all the files from 
Tutorial\XML on the cover CD 
into there. The important file you 
are looking for to start this 
section is skeleton fla. 


Notice anything 
different? 


If you've been used to the Flash 5 
interface, you know how 
frustrating it can be when you are 
trying to use design tools and 
ActionScript at the same time. 
The Actions panel or the Output 
panel clutters your display — you 
just couldn't get a clear view 
without pulling panels around all 
the time. Thankfully, Flash MX 
has had a rethink. The 
screenshots show our set up of 
panels of which Macromedia 
conveniently provides some 
default layouts for panels which 
are split between Designer and 
Developer. Here, we've chosen 
Developer [1024x768] Panel 

Set from the Window menu. 
Flash MX deals with the old 
clutter by making these panels 
dockable into/onto the sides 

of the main window. They even 
have nifty minimisation buttons 
like WindowShade. 


The debugger gets 
a facelift 


One of the biggest issues we had 
with Flash 5 was the debugger, 
and in Flash MX it’s good to see 
it’s had a bit of an overhaul. 

You can interactively set 
Breakpoints, which you can also 
do through the Actions panel. 
Although we haven't used 
Remote Debugging extensively 
with Flash MX we're hoping that 
with the Debugger improvements 
the link for Remote Debugging 
will be better. 


Open the tutorial file skeleton. fla from the 

cover CD in Flash MX . Take a good look 
around the new Flash Mx interface and bring up 
the Actions, Reference and Properties panels from 
the Window menu. (See the Notice anything 
different? margin note). 


4 | The flow of control within this may not be 
familiar to you. Firstly it relies on Events; when 
used to load data, the XML object fires an Event 
that essentially tells another function to execute. In 
the screenshot we have highlighted the line: 
getNews(userid); to kick start our XML request. 


Once our XML has been returned back into 

our Flash movie, we can then manipulate it. 
This is what happens when our Event Handler 
executes. We call the function extractNews() which 
then goes through the returned XML and generates 
some friendly ActionScript Arrays and Objects for 
us. We have highlighted this function in the 
screenshot. There is an Array called newsArticles 
which will now be available to us. 


On the first frame in the Timeline, on the 
actions layer, you'll see the ActionScript 
associated with this frame in the Actions panel. You 
should read the comments made at the top of the 

ActionScript, and bring up the Reference panel. 


5 | Now find the function getNews() and you will 
see that it creates a new XML object 
(xmiquery) and puts your unique user ID (userid) in 
there. The real meat in the getNews() function is the 
line: xmlquery.sendAndLoad(newsFeedURL, 
xmlresponse). This line sends out a request to our 
server and gives it your unique ID. 


SLES Sas 
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8 | At this point, you might like to test your movie 
in the debugger, by going to Debug Movie. 
For Flash 5 users, you'll notice that the debugger 
has had a significant upgrade. When we start the 
debugger, it immediately pauses the movie. 
However, we just want our movie to run so that you 
can look at the Variables defined in _levelO. So, click 
the Green Arrow to get the debugger going again 
and wait. 


The first thing to do is to look for the Properties 


3 | section and — with your unique ID in hand — 
amend the ActionScript: var userid = 30; so that it 
equals your unique ID (we have highlighted this 
above). Just beneath you will note the property 
newsfeedURL which has the URL of the News Feed 
on the server and where our XML request and 
response will be passed to. 


G Then on the line: xmlresponse.onLoad = 
extractNews; we see our Event Handler 

which Flash will execute when the sendAndLoad 
has completed and returned data into our 
xmlresponse object. And that’s really as complicated 
as it gets. 


9 | If all is well, you'll see some XML in the Output 
window. You should click on the _levelO movie 
in the Debugger window, and then pick the 
Variables tab and have a look at the contents of the 
newsArticles Array. The movie has requested the 
XML and has traced this into the Output window, 
and then using our Event Handler, extractNews(), 
we have transformed this into a simple ActionScript 
array called newsArticles, > 


Part 3: Enough code? Let's look at design 


Now that all the coding is complete, we can take a look at the 
overall appearance of the site... 


The design 


A-Bomb has a very clean brand, 
with a white background and 
sparse colour use. The red that 
we used was #CA2819 and the 
green was #4C541B in case you 
want to copy the colour scheme. 


Better breadcrumbs 


With all these nested symbols 
running riot in Flash, you'd think 
there would be a better way to 
navigate? Flash MXto the rescue. 
Gone are the bad visual feedback 
animations of Flash 5 when you 
edited a symbol directly nested 
in another - now you get a nice 
zoom feeling which helps you 
subconsciously know where you 
are. Also there is anew movie 
navigation system, just beneath 
the Timeline is a Breadcrumb 
navigation to help you when 
editing symbols. This is an 
improvement over Flash 5 which 
had something similar above 

the Timeline on the PC version, 
but we never found it worked all 
that well. 
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1 | Dock your Actions panel and we'll start putting 
some text fields, movies and buttons into our 
movie. First, we'll need something that will 
announce to our users that we are waiting on the 
content coming from the server (the XML Feed). 
Insert a New Symbol, make it a Movie. Name the 
symbol waitingclip. 


On the symbol add a text box with Please 

Wait... We are retrieving the latest news in 
Arial 12 pts. The screenshot above gives an example 
of how to lay it out. 


Insert another New Symbol, make it a movie 

also. Call the symbol newsmovie. You'll need 
to make 4 text fields. The first is just a heading, 
News, so Arial 12 pts again. 


4 | Below that make another Arial 12pts field, this 
time make it a piece of Dynamic Text by using 
the Properties panel. On the Properties panel for 
this text field, link this Dynamic Text to the variable 
named newsdate. This field will hold our Date for 
each item of news. 


Now create another text field, same text size 

just below that, this time it should be Dynamic 
Text and its variable should be newstitle. This field 
will hold our Title for each item of news. 


Beneath that, create a bigger multi-line 

Dynamic Text field, and link it to the variable 
newscontent. This field will hold our Content for 
each item of news. 


9 | Using the Library, edit the newsmovie that you 
created. Drop the next button onto the page 
somewhere on the bottom of the screen, just 
beneath the Content box is a good place to put it as 
we have done in the above example. 


8 | You can see that we made a fairly simple 
button to go with our client's clean looking 
brand. It's just the word Next in Arial 14pts and then 
a greater than sign. 


ra insert another New Symbol, this time make it a 
button. Call it next button. 


e 
10 should open your Actions panel for the next 
button instance and give it the following 
ActionScript. We use the Expert mode editing, 
which you can find in the Options drop-down 
on the Actions panel at the top-right hand corner 
of the screen: 
on (release) { 

_level0.nextNews(); 
i 


Bidcared SA Lt 
o Edit the root scene, add three layers. Using the 
library of Symbols you have just made, drag 
and drop the newsmovie onto a frame on an empty 
layer, in the Properties panel give the movie an 
Instance name of newsmovie. Drag and drop 
waiting clip in a similar fashion, giving it an Instance 
name of waitingmessage. 


ne 


If you look in the Library you should see a 

graphic called abomblogo, this is A-Bomb's 
Logo and can be placed on another layer and 
scaled. For those used to Flash 5, use the Free 
Transform tool in MX. Place it on the left-hand side. 


Part 4: Testing, publishing and security 


Now that your site is all in place, all that needs to be done is check 


to make sure that it works properly... 


Sandbox 


Security is important within 
Flash, and you should be aware 


caesoelenert intent? 7ySereen23P4 19ttlZ ofS lak 2Crdiaact entry ASN Torche 
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that there is an important 
constraint on movies that use 
XML on other domains. If you 
Test this movie in the Standalone 
Flash 6 Player you will have no 
problem. If you publish the movie 
to HTML and then view it locally 
using a browser over the 
filesystem, you will have no 
problem. However, if you put the 
HTML and your SWF file onto a 
Web server... then it will not work. 
This is called Same-Domain 
security which says that you 
cannot access data from another 
domain (‘.e. a different server) 
when Flash Player is embedded 
within an HTML page on a Web 
server. This security SandBox 
stops people pilfering data from 
sites. There is acommon 


Now you are ready to test your creation. 
Assuming that you have followed our naming 


techniques outlined in Flash, it should work when 
you Test Movie from the Control menu. You should 
initially get the message, Please wait text while the 
movie retrieves the XML News Feed. You need to be 
connected to the Internet for this to work. 


workaround for this at 
[w] http://share.webziggy.net/. 


. . : a 
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Here's what it should look like. Don't forget to 
| 4 | try changing the data on the server using the 
content admin tool described in Part 1. But watch 
out for your Browser Cache as both Netscape and IE 
will cache the XML, so you'll need to clear your 
cache if you change the data on the server. 
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ecordingtart ist+St inesNordanst aut 27ethighiy+accimimed+nevtalbunt2E" 


News 


126ee2001 
Recent orojacts Pau! Frankie 
Pas Frankiond’s soundtrack to Lowe Linky’ Bure "PCE fern, 


directed tw RSA Chins Hanan carectty sicmg Besuphot 
tore 


You may want to publish this movie, but you 

should read the comments about Sandbox 
opposite. However, if you set your publish settings 
to export for Flash Player 6 and Compress Movie 
(another godsend that we've all been eagerly 
waiting for), and then hit Publish you can then load 
the resulting HTML into a browser with Flash Player 
6 installed. 


Once the first piece of news has appeared, 
click the Next button to cycle through all your 


data from your News Feed. 
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If you're a bit uninspired and you need 

some help, you should take a look at another 
site the has been built using extensive XML 
transactions with more on their way. Go to 

[w] www.joshandpecs.com/journal.asp and click on 
the filofax after it detects Flash. 


cre 


More information about Flash and XML 
interactivity is available from the Webziggy 
Website at [w] http://share.webziggy.net// where 
there are also links to other sources. 
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FOR ALL WEB DESIGNERS 

Every month, Cre@teOnline showcases the finest sites 
on the Web and the people behind them. As well as 
acting as a forum for professionals to exchange ideas, 
we also explore how sites can be improved and the 
effect they have on their end-users. If you want to stay 
ahead of the game, start here. 


THIS MONTH: THE GAMES ISSUE 

Web designers are turning their hand to games 
development and design over a variety of platforms. ; 
We investigate the best games to come out on the 
Web, iDTV, Mobile PDA and Console. 
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The Browser Issue 


Is your design being ripped off? 
We name and shame the design rippers and look at 
ways you can stop the blighters. 


Big Issue: Has the internet provided design agencies 
with a way into the games market? 


Dialogue: Jon Romero, developer of Doom, tells us why 
he thinks the future of games design lies with the PDA. 


ON SALE: WEDNESDAY 17 APRIL 


The XML Issue 


Four coptes of Flash MX up for grabs, worth £433 each courtesy of... macromedia 


f you've read our seven-page, in-depth 

ie | review starting on page 8, you'll know that 

i\ vy Flash MX is truly incredible. To celebrate 
m the launch of this next-generation 

application, we've teamed up with Macromedia to 

bring you the chance of getting a copy forfree. We've 

got four copies to give away, worth £433 each. 

Sporting a brand new interface (enabling you to 
choose between designer and developer workspaces), 
Flash MX includes a gaggle of brand new features, 
bringing a wide range of tools for creating top-notch 
Web animations and applications. 

One significant addition is the ability to import 
native video and export it as an SWF file. Using 
Sorenson Spark compression technology, any 
standard video file supported by QuickTime or 
Windows Media Player can be converted, including 
MPEG and AVI. The individual video frames are 
distributed to the Flash Timeline, giving you complete 
control over a clip. 

Another addition that will prove handy is the new 
Free Transform tool. This is an amalgamation of the 


previously separate Rotate, Resize, Skew and Deform 
tools, and it effectively reduces the number of steps 
required to transform any shape. 

One of the best additions for designers using many 
bitmap or sound files is the fact that you can now use 
ActionScript to load JPEG and MP3 files at run-time. 
This goes a long way to helping reduce the file size of 
your SWF movies. 

There's tons more in MX — see our review on page 8 
— and we're sure that you'll be wanting to get your 
hands ona copy. So answer the simple question below 
and drop us a line. You can also enter online at [w] 
www.computerarts.co.uk/competitions. 


The question 


What's the name of the video compression technology 
present in Flash MX? 


To enter 
Entering this competition is easy, simply click the 
CurrentCompo button from the Computer Arts Special 


CD interface and then enter Flash MX as the 
competition name. 

Then select your answer and fill in all the other 
details and click Submit Entry. Don't worry if you're not 
online, you can still enter by post. 

Just write your answer, name and address ona 
postcard and send it to: 

Flash MX Competition, 

Computer Arts Specials, 

29 Monmouth Street, 

Bath. BA] 2DL. 

Include a phone number where you can be reached 
during the day. 


The rules 

The closing date is 16th May 2002. Employees of The 
Future Network, CIT PR, Macromedia and any of their 
agents or families may not enter the competition. One 
entry per reader. The editor’s decision is final. No 
correspondence will be entered into and there is no 
cash alternative. No purchase necessary. EG 


= 
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Flash MX Quiz was created by Sprite 
Interactive at [w] www.sprite.net 


Files on disc 

In the Tutorial\ Quiz folder on the cover 
CD youwill find the quiz fla file 
containing all the assets you will need 
to complete the tutorial, as well as a 
free demo of Flash MX in order for you 
to build your game. 


A Flash quiz game 


Illustration: Bryn Owens [w] www.bluntdog.co.uk 


With the release of Flash MX, we show you how to build 
a quiz game that takes advantage of the new features... 


the application was used to 
create specific site elements 
— especially animations and 
intro splashes. Having developed into 
Flash MX, it can now be used to create 
all sorts of interactive experiences. One 
area where you can apply MX straight 
away is in the creation of quiz games. 
We've teamed up with Sprite 
Interactive to bring you this tutorial, in 
which you'll use ActionScript and some 
Flash design skills to structure a quiz. 


ack inthe early days of Flash, 


The finished product can be viewed at 
the Sprite Website at [w] www.sprite.net. 
The questions in the quiz itself are all 
Flash-related, so you may even have fun 
taking trying it out before you work on 
the tutorial. Here, you'll learn how to use 
all the new Flash user interface 
components, such as radio buttons, 
drop-down menus and push buttons. 
We'll also show you some of the new 
ActionScript functions, most notably 
the new dynamic loading of sound into 
the movie. 


Part 1: Creating your Flash MX quiz game 


Follow this tutorial and use the files in the Tutorial\Quiz folder on the CD to build your game... 


XML 


XML (eXtensible Markup 
Language) is a great way to 
interchange structured data in 
Internet applications. We have 
used XML in this quiz to format 
the questions so they can be read 
by Flash in a standard format. In 
XML, as with HTML, you can use 
tags to mark up or specify a body 
of text. In XML, you define tags 
that identify a piece of data, 
which enables the same XML 
document to be used and reused 
in different environments. 


How Well Do You Know Flash 6? 


Rivest 
ey First of all, prepare your movie. Create six 
layers and name them — from top to bottom — 
Question Display, Ul Components, ActionScript, 
labels, and background, then import the 
background graphic onto the background layer: 
background.swf from the folder on the CD. 


4 | Next, drag a new CheckBox component onto 
the stage and label it, Give me the hard 
questions. When this is selected by the player an 
alternative set of questions will be used. Give the 
CheckBox the instance name hardQuestions. 


We need to put our user interface components 
on the stage. Select the UI Components layer, 
open the Components panel and drag a new 
ComboBox component onto the stage. This will be 
used to select the number of questions to answer. 


Drag a PushButton component onto the stage 

and give it the label Start Quiz. Since you want 
the button to actually perform a function, you need 
to add a Click Handler — this is an ActionScript 
function that is called when the push button is 
clicked. To assign a handler set the Click Handler 
field to startQuiz. 


Select the new ComboBox and open the 

properties panel. Here, enter two values in the 
Labels field and corresponding values in the Data 
field. Give the ComboBox the instance name 
numQuestions. 
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Now add the script from code1 txt in the 
Tutorial\Quiz folder on the CD to the first 
frame action of the Actions layer. This code defines 


the startQuiz function that is used to load the 
questions for the quiz and start the game. 


Part 2: Adding the questions 


The next step is to add the questions to your quiz game... 


41 Wond tm either the Dard OF #esy question sett depending on the 
11 akon of the chen 
Af (hardqueations. gacVeiue() ** true) « 
quest tonsXHlL, Load ("quest ione_hard.s=") / 
» else 
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@ get the number of questions selected from the 
ComboBox. It loads the appropriate set of questions 
by calling the getValue() method on the CheckBox, 
it will return true if checked. 


The function uses the getValue() function to 


The questions are loaded from an XML file. 

The file contains a number of elements. Each 
element defines a question, its possible options and 
its answer. Refer to the comments in code’ txt for 
more details on the XML functions that are used for 
the quiz, and refer to question_easy.xml for an 
example of the XML format. 


Once the questions have been loaded, you 

need to start the quiz. On the Labels layer 
create keyframes on frames 1, 15 and 30. Give the 
first frame the label startQuiz, frame 15 
displayQuestion and frame 30 endQuiz. These will 
be used to control the quiz. > 
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Part 2: Adding the questions continued... 


The new Flash MX 
environment 


Flash MX boasts a whole new 
environment that, although 
monitor-intensive, offers a lot 
more flexibility to the Flash 
developer. Gone are the 
dockable panels that were the 
bane of so many Flash 
developers’ lives. These have 
now been replaced with a 
context-sensitive properties 
panel, to bring Flash MX in line 
with Macromedia's other 
products, such as Dreamweaver. 
Flash now also has a new 
Answers window close-to-hand, 
which gives you quick access to 
support matertal and The displayQuestion frame is used to display 
ActionScript reference. A great the current question, the text for a question, 
new feature in the Timeline is the its possible answers and a button to move onto the 
ability to organise your layers next question. 

into folders, and the colour mixer 
panel has had a new overhaul to 
make it easier to use. 
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Name the RadioButtons option1, option2 and 

option3. Drag a new PushButton onto the 
stage and give it the label Next Question, and the 
instance name nextQuestionPattern. With the 
RadioButtons and PushButton in place, the layout 
for the question display is complete. 


How Well Do You Know Piash 6? 


CG id at a 


You first need to create two dynamic text 

fields: one to display the question number, and 
another to display the question. Create these on the 
Question Display layer and give them the variable 
names questionIndicator and questionText. Make 
the questionText field multi-line so that it displays 
the questions correctly. 


B i7 disebie tae West question puyton unesl 
[/ oa answer 12 selected. 
ext Quast tonducton,setfinabied (false): 


ID) (/ Uedeve the question number tndtearse 
questionIndicator = "Question * + (questiontuber + 1) +" of * + mumerorquesc: 


B // Opt che current qunation XBL abaece 
Current QuestionEEL = questions(questionfusber! : 


Af Updave the UI Component Laders 


queetionText = current Quest sonxEL.acteibuees.question: 


Add the code from code2.txt on the cover CD 

to the frame action on frame 15 of the Actions 
layer. This disables the next question button by 
calling the setEnabled() function of the PushButton 
component. It then updates the questionIndicator 


display with the current question number. 


om cont * 
G Drag three RadioButton components onto the 
UI! Components layer underneath the 

questionText field. Select the first RadioButton and 
set its Data field to 1, set the second one to 2 and 
the third to 3. The Data field is the value returned 
for the selected radio button when the getValue() 
function is called on the radio button group. 


¢/ Gev the current question XBL object 
SUrrentQuestionXML = questions(quest ionNuyber) : 


#f Update the UI component ishets 

duestionText = currentQuestion%ML. attributes. question) 
optioni.setLabel (currentQuesticniML.attributes.optioni); 
option2.setLabel (currentQuest ionXML.attributes,opt ton); 
options. setLabel (currentQuest icnXML. attributes. option’); 


next Queet ion () 
THis te the Glick baudler tor the ‘Next Question’ 


function nextQuestion() ( 
quest ionNunbe: 


a 
9 | To display the question, the code retrieves the 
current question from the array of XML 
question objects that you loaded at the start of the 
quiz. The values for a question can then be retrieved 
by accessing the attributes object of the question. 


Part 3: Adding the answers 


Now that all the questions are in place, we need some answers... 


Flash Components 


Flash MX lets you quickly 
develop advanced user 
interfaces by using a number of 
preset components. These 
reusable objects are movie clips 
that have associated parameters, 
and behave a lot like their 
counterparts in Dreamweaver. 
Flash MX includes all of the most 
commonly-used operating 
system interface elements, such 
as radio buttons, drop-down 


option2.setiabel (currentQuestionxML.acteihures. option?) : 
opttond.setLabel (current Quest ionRML. attributes. option3) 7 
atop (): 


— allah ir Tet rated 
nexeQuestion |) 
‘This am the click tandier for the ‘Hexe Questcen’ 


menus and push buttons, and Me 

they can be integrated into your ft 

movies ina simple drag-and- & Using this method, the question text is 
drop fashion. displayed in the question text field and the 


radio button labels are updated to display the 
question's possible answers (the values of 
.attributes.option( etc.). To set a RadioButton label, 
the setLabel() function is used on each of the three 
radio buttons. 
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an answer you need to add a Change Handler 
to each radio button. In the Change Handler field of 
each radio button add the value 
enableNextQuestion, this will be the name of the 
function to call when they select an answer. 


oo a =e 


To re-enable the button once they've selected 


bentQuest son) 
‘This te the click handler for che ‘Next Question’ 
burton, 


function nextguestion() ( 
quesciontunber++) 


// If their answer is coreect, wd to their socre 
Af (endioGroup, geeValue() ** currentQuescionkiL.attributes.ensver) ( 


correctQuestionse+; 
’ 


(7 3S Chey we mnavered 911 che quesctons govo the ent of che quis 
Af (quemtionvunber == pumberotquestions) ¢ 
gorokndPiay (endgurs") 


Add the code from code3.txt to the frame 

action on frame 15. This code defines the 
enableNextQuestion() function which uses the 
setEnabled() function to re-enable the Next 
Question button. 


Part 3: Adding the answers continued... 


4 | You need to add a Click Handler to the Next 
Question push button. To do this change the 
value for the Click Handler field of the button to 
nextQuestion. Add the code from code4.txt on the 
cover CD to the frame action on frame 15, This 
code defines the nextQuestion() function. 


function RextQuestion() ( 
quest iontimber++; 


/f Tt these anaver is correct, eda to these aoete 

At (emdiodroup.getVaiue() ** currentQuest ionXRL.attxibutes -anewer) ( 
eorrectQuestionsss; 

, 


{} Tf they've answered 913 che quentions gote the end of the quiz 

Af (questiontumber == nunberorquestions) ( 
GoRoAnAP Lay ("andguie”) : 

, 


7f Remay vhe radio Durvons to be alt Geselectes 


function wentOuestion |) 
quest tonwunber s+; 


74 Ut thaae ansenr im Correct, eda to their acces 

Af [CadioGroup, yetVaiue() == currencOuestionXML.attcibutes ansver) ( 
correctQuent ione++s 

) 


// Xf shay'ye apevered mi) the quemtions gote the end of vhe quiz 
4 (questioniiumer == muberotquestions) ( 

govednaPiay (Yendoute) : 
’ 


// Paves the redio Buttons to ke sii meneiecees 
Optiont.setstate (taiee) : 

opesonz, 

ape ions, 


This function first increments the current 
question number. It then checks if the answer 
selected is correct by comparing the values of 
getValue() result from the radio button group with 
the defined correct answer for the question. If 
identical then the player score is increased. 


6 | The function then checks if the player has 
answered all their questions, if they have it 
jumps to endQuiz. If not, the radio buttons are all 
deselected and the displayQuestion frame is 
repeated to display the next question. 


eee ee 
Part 4: Adding the sound files 


All that now remains is to let the players know how well they've done... 


Sprite Interactive 


Sprite is the developer of this 
Flash MX quiz game. Based in 
Fetcham, Surrey, Sprite 
Interactive Ltd is anew media 
company specialising in Web- 
based solutions. Sprite builds 
Cutting-edge solutions fora wide 
range of high-profile clients, 
including TONI&GUY, TIGI, 
Philips, Schnieder Electric, 
Pirelli, ESPN and Disney 
Interactive, for whom it has 
developed a number of Web- 
based games and applications. 
Sprite is publishing a book on 
Flash animation techniques 
through Focal Press this Easter. 
For more information on 
Sprite, and to play the games 
it has developed, visit 

[w] www.sprite.net or email 

[e] info@sprite.net. 


This is done on the endQuiz frame. On this 

frame create a multi-line text field with the 
variable name welldone — this will display the end of 
quiz message. Next, drag a push button from the 
components panel onto the stage and give it the 
label Play Again and the Click Handler restartQuiz. 


cheer .ontoundCempiete * atopcheers 
cheer attachtound (“ener”): 
cheer sare (04 


velidone = “You've dome it, you're @ super Brein!! (nov get aeey trom that ca 


/1 Dimplay ow many questions eey got correct, 
velidone += *\o\n* + vorrectQquestions +" out of * + nunberofqvestsons + * vorres fl 
seep: B 


4 | To play the sound a new sound object is 
created and the cheer sound is attached using 
the attachSound function. The sound is played using 
the start() function, and the new onSoundComplete 
handler is used to automatically restart the quiz 
when the sound clip finishes. 


11 Piapiay = Sitcecent meseoe depeding oh Sew many question ther 
2 yor e1gme. 
Af (eorrect <2) 
walldone = "Oh te, that vee ® weetul acters 
alse 4€ (correct <p) { 


sal lcone = "Hot bad, DUE FOU'ee ttl get & LONG WAY 48 go to prove your Fiaelll 


) alee Af (coreece < 7) ( 

selidone = “Weaxiy there, Gey again and You wight Suet creck iy. */ 
) whee ¢ 

11 Piay ee cheering wound 6141p 

cheer = naw Sound) > 

‘cheer. ontounsconplete = etopCheer) 

cheer, ettechsound (*enmar*) : 

cheer ,wemee (2 


welldone * "You've done it, you're « super Drain’! (nav get euey free that oo! 


Paste the code from code5.txt into the frame 
action of frame 30. This generates a message 
depending on the player's score and displays it in 
the welldone text field. It also defines the 
restartQuiz() function used to restart the quiz. 


2 called shew che cheering sownt 
ned playing. This restarts che quit automatically 


ed WER Che *Fiay Agatné butcon As elichéd, 


8 | To attach the onSoundComplete handler the 


code defines the function stopCheer() and uses 


the line cheer.onSoundComplete = stopCheer to 
attach the function. The stopCheer() function 
performs the same function as restartQuiz. 


If the player gets a good score a sound clip will 

be played. To import the sound select File> 
Import and select cheer.mp3. Next, open the library 
and select the Linkage option for the imported 
sound effect. Check Export for ActionScript and give 
it the identifier cheer. 


G Now drag a ScrollPane component onto the 
stage. Next, open the library and create a 
new movie clip called Instructions to hold the 
contents of the scroll pane. Write the instructions 
into this movie using the Text tool and, using the 
Linkage option, check Export for ActionScript and 
give it the identifier Instructions. To attach the 
Instructions movie clip to the scroll pane, select 
the ScrollPane component you created and open 
the properties panel and enter the value Instructions 
for the Scroll Data field. 
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“It’s probably the best Flash wpaptile I’ve seen...” 
Pete Barr-Watson discusses the development of MH-based content... 


t seems incredible that a company formed in 
January of this year should already have a 
client list including Channel 4, Microsoft 
and EMI, but pixelfury is no ordinary 
start-up. With Flash guru Pete Barr-Watson as its 
founder, the company boasts well-established links 
with the Web design community, as well as unbeatable 
Web and multimedia skills. 

Pete came to prominence as a founder director of 
Kerb, working with the company from its humble 
beginnings in a squat in 1996, through to its expansion 
to a 22-strong corporate outfit. “The company had 
become more commercial and market-driven, which 
suits it really well, but it wasn't challenging for me 
personally any more,” he says. 

Surprisingly, Pete has no formal art training. After a 
variety of dead-end jobs he was made redundant in 
1995: “At the time, the Internet was this strange thing 
that got mentioned on the news. | got a 9600 baud 
modem, an Internet account, got hold of Photoshop 2.5 
and Hotdog and started designing Websites. Initially, it 
was for my own amusement, then | started doing some 
for local companies.” 

“I strongly believe that screen design is a discipline 
in itself,” he continues. “I don't know if | had settled into 
print whether I'd have been as successful. For that | do 
think you need more formal training.” 

Having followed the progress of Flash since its 
launch, Pete began working with version 4 of the 
software. Now a prominent member of the Flash 
community, he has graced several advisory and design 
panels, contributed a chapter to last year's New 
Masters Of Flash publication, and is currently working 
on content for a second book. 

Despite his pedigree, Pete found the first couple of 
weeks of pixelfury’s life something of a worry: “We did 


loads of PR and meetings, but nothing seemed to 
come of it. But then, literally in our third week, we got 
work doing a microsite for Channel 4, and then the 
contract for a major job for EMI to produce one of the 
flagship Flash MX sites for this country.” 

“MX is probably the best Flash upgrade I've seen,” 
he adds. “With the improved workflow it’s taken a 
massive leap. We now even create most of our 
illustrations directly in Flash.” 

Another key project forthe studio is a Flash-based 
music video. For the record label the benefits are 
obvious, with far lower production costs than that of a 
3D-rendered CG music promo. 

“Flash lends itself to motion graphics. Take that and 
add the ability to export to broadcast standard and it 
opens up a whole new marketplace. But it's not as easy 
as it sounds. Talking to people in the Flash community, 
we realised it was something they'd been trying to do 
for ages. The problem is that when you try to export any 
animation embedded in a movie clip it won't play 
properly. We've developed a way around that, so you 
can create a video for the Web, and then easily drop it 
out at high quality.” 

With several other projects currently under way, 
including the development of games for the mobile 
Pocket PC platform, a Web game fora girl's clothing 
company, as well as content for Microsoft, Pete is 
now looking to expand his core team: “I want a core 
team of five — a pixelfury hit squad, with freelancers 
first then taking on the extra work as necessary. The 
next step is to take the focus of our services away 
from the Web, and move it further into mobile 
devices and interactive TV.” GEES 
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1. The swirling technique of this different-looking preloader 
is reminiscent of gymnasts’ ribbons. Again, departing from 
the normal way of doing things in Flash. 


2. “Most purists hate using bitmap images when building 
Flash applications. But for a subject such as Aurora, who 
has such amazing publicity material, it's a no-brainer. So, 
rather than fight it, we embraced it and in the process came 
up with some pretty cool visual effects. This screen 
demonstrates a focus shifting effect. When the mouse 
moves over one of the three group members, the focus 
highlights them.” 


3. This is a new site for EMI Music for the group Aurora, 
viewable at [w] www.aurora.mu. The site is being built 
entirely in Flash MX and will have two versions available: 
one for Flash Susers, the other taking advantage of the extra 
features of MX. “It's a very visually-led site, with lots of 
graphical effects that you don’t normally see in a Flash 
application,” says Pete. “The photos and audio are pulled in 
when the user views the site so that the audiovisual content 
is always up to date, without any special server technology.” 


4. pixelfury’s dedication to support the Flash community is 
reflected in this area of its Website. The company wanted to 
create something with a similar feel to Dreamless.org when 
it shut down last summer. “We created this section of our 
site where some of the industry's top creatives can mix it up 
and chat away from the public boards. It sounds elitist, but it 
isn’t. Well, maybe a little bit.” 


5. After one of his team turned up for work wearing a T-shirt 
from a rival company, Pete decided to design a pixelfury 
alternative. “This is from the ‘sucking’ variety T-shirt, with 
the main graphic on the front, a pixelfury label at the bottom 
corner, text and graphics on the sleeve, and the same on the 
back. We may even sell them on the site.” 


6. This is one of the images due to appear in the redesign of 
pixelfury's own Website. “The integration of vector graphics 
and photo imagery is something that fascinates me, so we're 
looking into this as much as possible for the redesign. 
Everyone who has seen this image assumes that the picture 
was taken in Japan, but it's actually New York. | find it 
interesting that you can influence people's perception with 
a few well placed graphics.” 


7. pixelfury’s Flash-based Snowday game was developed for 
an as-yet undisclosed female clothing brand. “Teenage girls 
are a tough audience to engage with online games. But 
we've come up with something a bit different.” 


8. One of pixelfury’s Flash game projects. It's an idea that 
the company has been thinking about for a long time. It 
started off as a gameplay experiment and has expanded. It's 
Flash 4-compatible and iTV ready, and utilises scripting 
almost entirely for the gameplay. 


Creating a 


dynamic Website 


with Flash 


Using the free Flash resources from 
Graphicscene on the cover CD, you'll soon 
have a dynamic, professional-looking site... 


magine being able to build a 
dynamic Flash-driven 
: i | Website by taking your pick of 
\ some of the world’s top Flash 
designers’ work, mixing and matching 
backgrounds, navigation and animations. 
We have a royalty-free library of Flash 
resources from Graphicscene on the 
cover CD worth £150. These enable you 
to use off-the-shelf designs and 
components to create your own high- 
impact site or multimedia presentation. 
Graphicscene imagery is provided in 
both SWF and FLA formats and over 80 
per cent of the designs are vector-based, 
providing a scalable, customisable and 
fully-editable solution to most 
multimedia project requirements. In this 


way, you can quickly and easily put 
together a dynamic Website in a fraction 
of the normal amount of time. 

On the cover CD you will find five free 
designs to get you started in building 
something that’s more than just another 
faceless corporate Website. The brief we 
are working to is to create a five-page 
mini site that can be used as a generic 
template for any small site. We'll take 
you through how to import the free 
artwork and edit it in Flash 5, building in 
navigation and animating the line art, 
adding sounds and scripts and finally 
publishing the site in allits glory. On the 
way you'll pick up some tips on how to 
use Flash in general and Graphicscene’s 
files to create your site. > 
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Part 1: Before we begin 


Flash is powerful and has many different uses, but the basics are easy to learn. By following 
this simple tutorial, you'll be creating a dynamic multimedia Website in no time... 


Backgrounds 


Backgrounds are the starting 
point for any multimedia project. 
Drag and drop the backgrounds 
onto your existing template, or 
use as the beginning of your 
Website by dragging and 
dropping artwork on top. 
Backgrounds vary in style from 
vector animations to 3D and 
image-based designs. 


Navigation 


An essential part of any 
multimedia project is how people 
navigate throughout your work. 
Navigation bars enable the user 
to find what they want quickly 
and easily. This means the user 
has a greater experience on your 
site. All navigation bars are easy 
to amend, just adda link to 
buttons so users can jump 
around your project. 


EDIT TITLE 


NAME 


We are going to use the files that can be found 

in the Tutorial\Graphicscene folder on the 
cover CD. They are five pieces of work from the 
Graphicscene Complete Multimedia Stock Library 
and will form the bones of the Website. We'll show 
you how to edit them to customise your site. The 
finished result will look like the above screenshot. 


4 Next we are going to set up the structure of 
the five-page Website. The whole site will be 
created in one scene. We will create five keyframes 
with Stop actions, plus a 15-frame intro to build 
each page. Therefore, there will be five main 
keyframes each labelled up by their specific page. 
An additional two keyframes will be added at the 
beginning of the file to allow for a preloader. 


o The first thing to do is open Flash and 
familiarise yourself with the interface. Before 
we can get started, we need to create a new 
document by selecting File>New. 


Ia 20m 4] 


Rename Layer1 by double-clicking on the copy 


and enter the new name, Actions. Highlight 
frame 2 and select Insert>Keyframe. Repeat this for 
frames 3, 17, 18, 32, 33, 47, 48, 62, 63 and 77 


ore 
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When creating any new piece of work, first set 
the Movie Properties. Select Modify>Movie 

and enter the following settings: Frame Rate: 24, 

Width: 780 pixels, Height: 500 pixels. 

Tip: if you click Save Default these will be your 

default settings, each time you open Flash hereafter 

your canvas will be set up the same. 


6 | Now we will add Stop actions to our main five 
frames that will create each page. To do this 
open the Actions panel by selecting Window> 
Actions. Highlight frame 17 from the Timeline, then 
go to the Frame Actions. Open the basic Action list 
and double-click on the stop command. Repeat the 
same step for keyframes, 32, 47, 62, and 77. 


Part 2: Importing artwork 


Now we've mastered the basics, it's time to add some graphics. As well as showing you how to import 
artwork, we'll add a file as a library and then demonstrate how to use it in your project... 
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Open... 

Open as Ubrary... 
Open as Shared Library... 

cose await 
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Publish Settings... 3F12 
Publish Preview 
Publish OFZ 


1 Template 
2Assets.sfa 
SAssets.fia 


Before we continue, it is always a good idea 
to save your work. To do this select File>Save 
as and choose a destination where you wish to 
save your work. Now we have our Timeline 
structure to work with let's begin by importing some 
artwork to modify. 


list files of Type: > 


All File 


The first image we will open is the background 

artwork. Select File>Open As Library. Select 
the chosen background 025009 from the cover CD. 
Tip: the platform that the file has been created in 
affects whether you can view it. If you can't view 
the file you wish to select choose All Files from the 
List Files of Type drop-down menu. 


ba When you open a file as a library you only see 
the Files Library, not the canvas with the 
artwork. This is handy when it comes to transferring 
files as you can just drag and drop Movie Clips from 
file to file. The tidiest way of transferring files is by 
creating a new folder in the Library (if the Library is 
not visible select Window>Library). Create the new 
folder by clicking the arrow at the top-right corner 
of the Library and selecting New Folder. Rename the 
folder Background, then grab the main movie clip 
from the Final Movie folder and drop it straight into 
the Main Library. 


Part 3: The background 


It's time to create a setting for all the action that 
will be going on in our dynamic site... 


Preloaders 


Preloaders add functionality and 
usability to any multimedia 
project. Each preloader has a 
small looped animation with a 
tiny file size. Preloaders can 
keep the user entertained while 
the main content of your project 
is loading up. 


Line art 


Line art is a great feature to add 
to any Website. Artwork is 
extremely versatile to add to your 
project. You can use the artwork 
as purchased, or add solid fills to 
change the work's look and feel. 
You can also bring the artwork to 
life by adding some animation. 
End results are stylish and easy 
to achieve. 


o Now we have the artwork in our library we 
can modify it to suit our needs. Let's begin by 
creating a new layer for our artwork to sit on. Select 
Insert>Layer. Rename this layer as before and call 

it bkg. Move this layer below the Actions layer. 
Create a keyframe on frame 3. With frame 3 
highlighted, drag the main movie clip (025009) on 
to the stage. Double-click on the artwork to edit 

in place. This enables us to edit the artwork within 
the movie clip. 


4 | Double-click on the mask graphic to edit in 
place. Copy and paste the graphics to arrange 
them in a grid formation. Once this is done click 
back a layer to the background artwork where the 
mask layer sits. 

Tip: if you select, View>Grid>ShowGrid then you 
can align up the squares using a grid. Select 
View>Grid>Snap to Grid and the squares will snap 
to the grid lines. 
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We will now create a mask to add some more 

interest to the background. To do this we need 
to create a new graphic that will become our mask. 
To create our new shape select the Rectangle tool 
from the Tools panel, then select the Round 
Rectangle Radius button from the options at the 
bottom of the panel. Double-click this button and 
make the radius 30. Create a new layer and then 
draw the new shape, 62x62 pixels. You can check 
the size from the info panel (Window>Panels>Info). 


6 | Now we will change this layer to a mask. Make 
sure it sits above the main background image. 
Double-click on the page icon next to the layer 
name. Here you will see the properties for the 
chosen layer. Select Mask from the radio buttons 
and click OK. Repeat these steps for the two 
background layers but choose Masked. You need to 
lock all three layers to see how the mask works. 


Part 4: Amending the navigation 


Navigation is the key to a good Website. Navigation bars enable the user to find what they want quickly 
and easily. In this section we'll show you how to edit the navigation bar that we've supplied... 


1 a 


Create a new folder in your library called Nav. 

Open the navigation file called 021040 from 
the cover CD. Drag this file into your new folder in 
the Main Library. Create a new layer on the main 
stage and call it Nav too. Add a keyframe on frame 
3, this enables you to drag the main movie, 021040, 
from the Library and position it on the stage. 


The first thing we need to do is take off two of 

the tabs. Double-click on the navigation bar to 
edit in place. Unlock all the layers then delete the 
graphics you no longer need by selecting them with 
the Arrow tool. 


Rename this layer Mask Layer. Highlight the 
shape, select Insert>Convert to Symbol and 
enter the new name for your graphic as Square 
Mask. Make sure you have the radial button 
selected for the graphic option then select OK. 


To finish this section, we will add a block of 
colour for the background to sit on. Create a 
new layer below the three layers we have been 
working on and call it bkg colour. Draw the new 
shape, size 780x245 pixels, making sure the Round 
Rectangle Radius is at 0. Change the colour of the 
shape to #FFCCOO. Once this is complete, click back 
to the main scene. 


is 

Now we can change the copy. Lock the 
Buttons layer. Double-click on the titles until 

you can edit them. If you click down into the main 

instance of each title it will change the copy in 

the whole animation. Alternatively, change the 

copy from the Library by double-clicking on the 

main graphic, which here is Button_1. Highlight 

the copy and change it. > 


Flash 


Part 5: Linking the navigation 


The navigation bar is nothing without some functionality. So, we'll add some using editable Actions... 


‘Over 
tab! .gotofindP Lay "up" ); 
text .gotofindP Lay ("up"); 


Over) { 
tab!.gotofind? tay<"up" >; 
text! .gotofind Lay "up" )y 

pn (rotidut) { 
tab} .gotofindP Lay<"down® ); 


d “fn (rotiouty ¢ 
(rollout) { tab! .gotofindP Lay ("down"); 
‘text! .gotofind? Lay ("down"); 


pr (releose) ( 
root .gotoRindP lay(3); 


tab! .gotofind? lay( "down" >; 
text! .gotofindP Lay( "down" ) text! .gotofindP Lay ("down"); 


pn (release) { 
; getURL ("YOUR LINK HERE"); 


Now we can add our link. Press Tab, then type 
the first line _root.gotoAndPlay(3); 
Then press return and finish off with a close bracket, 


We have amended the look and feel of the 


navigation bars so we can now start to add BY Here you will find the code that makes the }. The main piece of code here is the second line 
links to the buttons so that they become functional. navigation work. We will add some more code _ which basically says that _root is the top level where 
First, we need to double-click on the navigation to link up our pages. The most effective way of the animation sits, for example, scene1. 
bar to edit in place. Unlock all the layers then linking the navigation is to hand-edit the code. gotoAndPlay means go to and play, and (3) is frame 
select the main button for tab1 then open up the Delete the last piece of code that prompts you to 3. Repeat the same for the rest of the tabs where 
Actions window. enter a URL. 


tab2=(18), tab3=(33), tab4=(48), tab5=(63). 


Part 6: Animating the line art 


Line artis a great asset to any Website and can add some great effects... 


Sounds 


Sounds are a great addition to 
any multimedia project. They 
enhance the user experience by 
adding another dimension to 
motion graphics. Sounds can be 
used ina variety of ways, such as 
Background sounds that play 
throughout projects or Rollover 
sounds that indicate a call to 
action, such as a forward and 


Create a keyframe on frame 3, which is on the 


| 2 | Change the line art to a graphic by selecting 


layer Headphone Anim in the main scene, then 
back button. Insert>Convert to Symbol. Enter the name drag the movie clip, Headphones_Anim, from the 
Headphones and then save. Make sure you have Library onto the third frame. Double-click it to edit 
. the radio button highlighted as Graphic. in place. Create two more keyframes on the layer 
a We can begin to animate our line art by Now delete the graphic from the stage and select where the headphones sit (frames 6 and 10). Select 
opening the file 012129.eps. Select Insert>New symbol. Create a new symbol called the headphones on keyframe 6 and increase in size 
File>Import and choose file. This will create a new Headphones_Anim. Make sure you have the radio by 20 per cent. Click the main layer so all three 


layer for the line art to sit on. Rename the new layer —_ button highlighted as Movie Clip. Drag and drop 
Headphone Anim. Resize the line art by 70 per cent the headphones graphic onto the first layer and 
by selecting Windows>Panels>Transform. then click back to the main scene. 


Part 7: Adding sounds 


Sound is an important part of any multimedia project. Sounds can greatly enhance the user experience by 
adding another dimension to motion graphics... 


keyframes are highlighted and then select 
Insert>Create Motion Tween. Now when you play 
the movie the headphones will pulsate. 


Graphicscene 


This Resource Library is made up 
of hundreds of fully-editable 
Flash images and multimedia 
files, created by some of the 
world's top Flash designers. It's a 
cost effective way of 


incorporating high quality design 
into your Websites and other 
multimedia projects. 


: Sy SIE eases os 


onto the stage and it will show up in the 


a Graphicscene has royalty-free sound files as Double-click on the navigation so you canedit Timeline. Now when you test the movie there will 


well as images in stock. There are different in place. Select the first button over tab1 and be a rollover sound. 
ways of adding sounds to artwork, but here we double-click it so you can edit the button. Each Tip: if there is not a graphic in the Up, Over or 
are going to add a rollover to a button. Open the button works in the same way: there is always an Down state then it is a hidden button. It will show as 
sound file, by selecting File>Import, then select Up, Over, Down and Hit state. If we're adding a a green button illustrating where the Hit area is, 
the file 019066.aif. The file will now appear in the sound on the rollover, we need to begin by addinga —_ although when you export the movie it will 
Main Library. new layer. Insert a keyframe in the Over state. become transparent. 
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Part 8: Scripting a preloader 


Preloaders add functionality and usability to any multimedia projects. They keep the user 


entertained while the main content of your project is loading up... 


Ces) 


users oye 


1 | Now we have completed the basic structure of 
our Website template, we can add a preloader 
to make the Website more functional. The preloader 
enables all the artwork in the main movie to load up 
before you preview it. Begin by importing the 
preloader (File 038058) into the Main Library. 


We need to add the code that makes the 
preloader functional. Double-click frame 1 of 
the Actions layer to open the Frame Actions panel. 
Make sure you are in Normal Mode as opposed to 
Expert Mode. You can check this by clicking on the 
arrow in the top right-hand corner of the panel. 


The preloader will sit on frames 1 and 2 of our 
main Timeline. To begin with, create a new 

layer and call it Pre_Loader. Then, add a keyframe 

on layer 3 and drag the movie clip into frame 1 

of this layer, so the preloader only covers frames 1 

and 2. 


5 | Open up the Basic Actions drop-down panel 
and double-click on the first action. If the 
frame is loaded, make sure Current Scene is 
displayed in the Scene drop-down menu. In the 
frame number field, change the number from 1 to 
77. Double-click the Go To action, changing the 
frame number from 1 to 3. 


Position the preloader so that it sits in the 


middle of the page. Another way of resizing 
artwork is to select the Scale tool situated in the 
Tools panel, in the Options section. 


Double-click on keyframe 2 to add an action. 

Choose Go To from the Basic Actions list. Make 
sure the frame panel shows 1. This means that the 
movie will loop between frame 1 and 2 until frame 
77 of the current scene is loaded, then it will jump to 
frame 3, which is the beginning of the main movie. 


Part 9: Finishing touches 


Now to put the shine on your multimedia masterpiece. Very soon you'll be 
impressing the world with your new-found Flash design skills... 


We have constructed an Assets. fla file that has 

a few text layers for you to copy and paste into 
your main artwork. Select File>Open>Assets. fla. 
Create a new layer in your main file and then 
highlight all four layers in the Assets document. 
Copy and paste them into your main file. 
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Position the layers accordingly and personalise 

the copy to suit your own needs. The final 
amendment we will make is to change the colour of 
the background for each page. Create additional 
keyframes on the background layer on frames 18, 
33, 48 and 63. With frame 18 highlighted, select 
Windows>Panels>Effect. Select Advanced from the 
drop-down menu and change Green to 60 and R+ 
to -60. Repeat the same steps for frame 33, 48 and 
63, selecting your own colours. 


Ee 
me 


3 | Once this is complete, your Website has been 
built using a small selection of artwork from 
Graphicscene.com. Select File>Export and preview 
the SWF to see the final working site. 
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J. Scott Hamlin can be contacted at 
{e] rendrboy@austin.r.com or 

[Ww] www.eyeland.com or 

[w] www.swiftlab.com. 


Files on CD 

The ecorp2-fla file needed for this 
tutorialis on the cover CD in the 
‘Tutorial\ Funky text folder. There are 
some extra interfaces and animations 
from Eyeland Studio's Flash Web 
Foundry CD on the CD root. 


Funky text 


Funk up your interface's buttons with some rollover and 
rollout animations, which we'll create in Flash MX... 


cripting with ActionScript 
often gets the lion's share of 
1 attention these days. And 
il with improvements to 
ActionScript, the Actions editor and the 
Debugging panel in Flash MX, that’s not 
likely to change. While most of the new 
power features are in the Actions and 
Debugging panels, there are a few things 
for designers to cheer about in MX. 

In this tutorial we'll utilise the new 
Distribute to Layer feature along with 
Flash MX’s new improved UI to create 
some funky rollover and rollout 
animations for buttons on an interface. 
You can create any number of effects 
with Distribute to Layers, but we're going 


to look at the possibilities and share a 
few tricks along the way. 

Most of the new features for designers 
are really just designed to minimise the 
tedium inherent in designing with Flash. 
But the new Distribute to Layers feature 
is one definitely worth shouting about, as 
it takes an ungrouped object and 
distributes the pieces to layers. 

This feature is useful for animated text 
effects. For example, if you break apart 
some text, each individual letter remains 
editable. So, you can break aparttext, 
distribute each letter to a separate layer 
in one easy step, and then apply 
animations to the layers. So, keep 
reading and get funky. 


\lustration: J, Scott Hamlin Email: rendrboy@austin.rr.com 


Part 1: Flash MX's Distribute to Layers feature 


Leveraging the new Distribute To Layers feature to create animated 
text effects on individual letters... 


ecorp2 interface 
from Flash Web 
Foundry 


The ecorp2 interface comes from 
Eyeland Studio's Flash Web 
Foundry CD. Flash Web Foundry 
is a collection of over 100 
interfaces, and more than 100 
animations and much more for 
Flash. \t can be found at [w] 
www.eyeland.com/fwf.php. 
Eyeland has supplied 32 
interfaces and animations for our 
CD. Sold separately they're 
worth $300. You'll find them 

in the Web Foudry folder on the 
CD root. 


Layer folders 


Now you can make the Timeline 
as manageable as the Library. 
Flash MX enables you to put 
layers in folders much like the 
folders in the library. You can 
even nest folders within folders. 
You can also lock and hide 
folders — saving you the trouble 
of locking or hiding individual 
layers one at a time. 


fe 


e Open ecorp2.fla located on the CD (in the 
Tutorial\Funky text folder) in Flash MX. Save 
the file to your directory with the name 
ecorp2_mod.fla. Scroll down the layers until you 
locate the Text layer on the Timeline. Select the Text 
Layer and click on the Insert Layer button to add a 
layer above the Text layer. Rename the new layer 
Text MCs (for Text Movie Clips). Select the Text 
layer again and press Command/Ctrl+C to copy. 
Now select the Text MCs layer and then press 
Command/Ctrl+Shift+V to paste in place. 
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Option/Alt-click on the dot underneath the 

eyeball icon in the Timeline next to the Text 
MCs layer to make all of the other layers invisible. 
Select the HOME text. Press F8 to open the Convert 
to Symbol dialog. Enter Home Main MC for the 
Name, set the Behaviour to Movie Clip, leave 
Registration at the centre, and click on the OK 
button. With the Home Main MC movie clip 
selected on the stage, press Command/Ctri+E to 
edit the movie clip. Zoom in on the text. 


f 


7 Select the Home MC H movie clip and press 
Command/Ctri+E to edit it. Select the H text 
and press Command/Ctri+B to break apart. Select 
View>Magnification>800 per cent. Adjust the stage 
so that the H is over to the left leaving some white 
space to the right of the letter H. Press N to select 
the Line tool. Open the Properties panel and change 
the Stroke Height to .25. Change the colour to red. 


Press Command/Ctrl+T, Command/Ctrl+K, 

Command/Ctrl+L, and Command/Ctrl+! to 
open the Transform, Align, Library and Info panels 
respectively. Put these four panels in the right panel 
bar in Flash MX. Remove all of the other panels such 
as the Color Swatches and Components panels from 
the panel bar on the right. Open the Library panel 
on the bottom so that you can see more of it when 
you expand it out. Expand out the Transform, Align, 
and Library panels. 


| 8) Select the Home text. Press Command/Ctrl+B 
to Break apart, and then press 
Command/Ctrl+Shift+D to Distribute to Layers. 
Change the name of Layer 1 to Actions. Select the 
letter H on the H layer. Press F8 to open the Convert 
to Symbol dialog. Enter Home MC H for the Name, 
set the Behaviour to Movie Clip, leave Registration 
at the centre, and click on the OK button. Turn the 
O, M, and E into movie clips naming them Home 
MC 0, Home MC M, and Home MC E respectively. 


es { 
8] Hold down the Command/Ctrl key and draw 
a straight horizontal line that is about twice as 
wide as the letter H. Draw the line a little bit above 
and the right of the letter H. Press the V key to 
select the Arrow tool and select the line. Press 
Command/Ctri+D five times to duplicate the line 
five times. Drag the fifth duplicate down below the 
letter H. Select all of the lines. Open the Align panel. 
Align the lines to the left edge (far left button under 
Align in the Align panel) and distribute them to the 
horizontal centre (second button to the left under 
Distribute in the Align panel). 


roe a a Hee ee 
Click on the folder icon in the Library panel to 
create a new folder. Name it Default 

Resources. Drag all of the movie clips, graphics, and 
bitmap resources into the Default Resources folder. 
Hold down the Option/Alt key and click on the dot 
underneath the eyeball icon in the Timeline next to 
the Text layer to make the other layers invisible. 
Open the Properties panel (below the stage), select 
all the text elements on the text layer and change 
them to light grey colour (Hex value #CCCCCC). 


6) Click on the folder icon in the Library panel to 
create a new folder. Name it Home Text. Drag 
the Home Main MC movie clip into the Home Text 
folder. Click on the folder icon in the Library panel to 
create a new folder. Name it Home Letters. Drag the 
folder into the Home Text folder. Drag the Home 
MC H, Home MC 0, Home MC M, and Home MC E 
movie clips into the Home Letters folder. 


Press Command/Ctri+G to group the lines. 
| 9] Press F8 to open the Convert to Symbol 
dialog. Enter Lines for the Name, set the Behaviour 
to Movie Clip, leave Registration at the centre, and 
click on the OK button. Press the To Stage button 
in the Align panel and then centre the Lines 
movie clips vertically and horizontally. Press 
Command/Ctrl+B to break apart. Select any portion 
of the letter H and you will see that we have sliced 
the shape up with the lines. > 
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Part 2: Creating a funky Shape Tween effect 


Creating nested Shape Tween animations for each of the letters and then 


adding tween effects to the results... 


Shape Tween 
variations 


You can get some interesting 
variations with Shape Tweens by 
experimenting between the 
Distributive or Angular Blend 
options. You can also play with 
the Ease option to change the 
pace of the effect. Negative 
values ease the tween in and 
positive values ease the tween 
out. Easing in means you will see 
more of the effect towards the 
end of the tween, and easing out ——- 

means you will see more of the @ Rename Layer 1 H Shape Tween. Click on the 


effect towards the beginning of Insert Layer button to add a new layer and 


the effect. rename the new layer Actions. Select frame 15 on 
both the H Shape Tween layer and the Actions layer. 
Press F6 to add a keyframe to both layers on frame 
Toggle on and 15. Select frame 15 on the Actions layer. Open the 
off Panels 


Actions panel. Open Actions>Movie Control. 
Double-click on stop to add a stop action stop(); to 


You can easily expand and close para " 
the keyframe. Minimise the Actions panel. 


a panel with its shortcut key. For 
instance, pressing 
Command/Ctrl+T repeatedly 
will act as a toggle to expand and 
close the Transform menu when 
it's nested anywhere on the 
Macromedia Flash interface. 
When a panel is not nested, the 
shortcut key will do three-step 
toggle: open, expand, and close. 


4] Minimise the Properties panel. Select frame 1 
on the H Shape Tween layer. Select All and 
press Command/Ctrl+B. Select the Arrow tool. 
Select all of the red lines and delete them. The red 
lines will also be broken apart wherever they overlap 
or touch the H shape. You will have to select all of 
the line pieces to delete them as well. Some portions 
of the red lines might be as small as a dot, so 
double-check that you have selected them all. 


Click on the OK button in the Preferences 
dialog. Click on frame 5 on the H layer and 

press F6. Click on frame 5 and select the Home MC 
H movie clip. Expand the Transform panel and enter 
180 degrees in the Rotation field. Expand the 
Properties panel and change Colour to Alpha. Set 
the Alpha to 0 per cent. Now click on any frame 
between frame 5 and 15 on the H layer. Set the 
Tween field to Motion in the Properties panel. 
Leave all of the Tween options at the defaults. 
Select frame 1 on the H layer and delete the Home 
MC H movie clip. 
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Select Frame 1 on the H Shape Tween layer. 
Select View>Magnification>800 per cent. 
Press M or Z to select the Zoom tool. Click on the 
Enlarge option and click once in the centre of the H 
to zoom in closer. Press V to select the Arrow tool. 
Hold down the Shift key and select the pieces of the 
H between the top two lines, the two middle lines 
and the bottom two lines. Hold down the Shift key 
and nudge the pieces to the left 20 times. Now 
Shift-select the remaining pieces, hold down the 
Shift key, and nudge them to the right 20 times. 


DB Now select frame 15 on the H Shape Tween 
layer. Select and delete all of the red lines. 
Once again, be sure to delete all of the pieces of the 
red line. You can check to see if there are any 
remaining lines by scrubbing between frames 1 and 
15. If you see any red lines in the Shape Tween you 
know there are still some red lines on frame 1 or 
frame 15. When you are done there should only be 
black shapes morphing from one side to the other. 


| 8) Repeat from Part 1, step 7 through to Part 2, 
step 7 on the Home MC O, Home MC M, and 
Home MC E movie clips. However, instead of 
drawing new lines as described in Part 1 steps 8 and 
9, drag and drop the Lines movie clip onto the stage 
and centre it over the letter shapes. For instance, 
edit the Home MC O movie clip, break apart the 
letter O, drag and drop the Lines movie clip onto the 
stage, centre it, and break it apart over the letter O 
shape. Otherwise apply the same Shaped Tween 
with the same settings to each letter movie clip. 


Click on any frame in between frame 1 and 
frame 15 on the H Shape Tween layer. Open 
the Properties panel and change the Tween option 
to Shape. Change the Ease field to -50. Later we will 
apply a alpha transparency fade to this movie clip so 
we're delaying the Shape Tween a little so that we 
can see more of the effect when the movie clip is 
visible. Leave the Blend mode on Distributive. 


6] Return to the Home Main MC movie clip. Add 
30 frames to each of the layers. Press 
Command/Ctri+U to open the Preferences dialog 
box. Deselect or turn off the Span Based Selection 
Option. The Span Based Selection option makes it 
very difficult for us to select specific frames within a 
span. Clicking on frame 5 on the H layer, for 
instance, would select the entire span on the H layer 
rather than just frame 5. Turning off the Span Based 
Selection makes it much easier for us to add 
keyframes to layers. 


BD In the Home Main MC movie clip, offset the 
tweens for each letter by 5 frames. For 
instance, start the tween for the Home MC O 
movie clip on the O layer on frame 10 and end it on 
frame 20. Start the tween for the Home MC M 
movie clip on the M layer on frame 15 and end it 
on frame 25. Start the tween for the Home MC M 
movie clip on the M layer on frame 20 and end it on 
frame 20. Be sure to delete the movie clips from the 
first frame of each layer. 


Part 3: Rollover and rollout animation effects 


Create a rollover and rollout animation using invisible buttons that 
control the text movie clips... 


Exploiting an 
anomaly or bug 

in Flash 

When you use the Reverse 
Frames option in Flash MX, 
tweens tend to get broken. Flash 
gives you an indication that 
there's something wrong on the 


last frame of the reversed Tween. 


There is a small warning sign in 
the Properties panel telling you 
that the tween won't occur 
because of ungrouped symbols 
(even though the symbols are 
still grouped), However, this 
results in a pleasing effect. 
Rather than getting the same 
effect in reverse with a RollOut 
event, we get a different effect. 
So we geta richer variety of 
effects with no extra effort. 


1] Select the Actions layer and click on the Insert 
Layer button. Rename the new layer Labels. 
Click on frame 1 of the Labels layer. Open the 
Properties palette and set the Label to Rollover. Add 
35 more frames to all of the layers. Select frame 35 
on the Labels layer. Press F6 to add a keyframe. Set 
the label on frame 35 to Rollout. 


inet v 
Add a keyframe to frame 40 of the M layer, 
frame 45 of the O layer and frame 50 of the H 
layer. Select frames 35 through 40 on them layer. 
Right-click (PC) or Option-click (Mac) on the frames 
and select Clear Keyframe. Repeat this operation for 
frames 35 through 45 on the O layer and frames 35 
through 50 for the H layer. The stop action on frame 
1 prevents the viewer from seeing anything. We 
need to add event controls to an invisible button so 
that people will be able to see the animations when 
they rollover or roll off the button. 


Ee 5 j 
Open or expand the Actions panel. Notice 
that there are already on (RollOver) and on 
(RollOut) event handles assigned to the button. 
Click inside the Actions palette and press 
Command/Ctrl+Shift+E to change to Expert 
Mode. Place the cursor at the end of the 
_root.one.gotoAndPlay(“OUT"); line of code, press 
enter and then add _root.home.gotoAndPlay(2); to 
the on (RollOver) code. Next place the cursor at the 
end of the _root.one.gotoAndPlay (“IN”); line of 
code and _root.home.gotoAndPlay (“RollOut”); to 
the on (RollOver) code. 
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Select the Arrow tool and drag over frames 1 
through 30 on the H, O, M, and E layers. Press 
Command+Option+C (Mac), Ctrl+Alt+C (PC) to 
copy the frames. Now select frames 35 on the H, O, 
M, and E layers. Press Command+Option+V (Mac), 
Ctrl+Alt+V (PC) to paste frames. Flash MX will add 
unnecessary frames on the H, O, M, and E layers 
from frame 65 to frame 94. Select these and press 
Shift+F5 to Remove Frames. Select frame 60 on the 
H, O, M, and E layers and press F5 to add a frame. 


B Return to the main scene. All of the layers, 
except the Text MC's layer, should be invisible. 


There should be a white dot above the Products text. 


This is the movie clip that we have been working on. 
Flash represents any movie clip that has no graphics 
in its first frame as a white dot. Click on the white 
dot with the Arrow key and open the Properties 
panel. Change the instance name to home. 


Minimise the Actions panel and press 

Command/Ctrl+Enter to test the movie. 
Rollover the Home button and observe the results. 
Rollover and roll off the Home button to observe 
the Text animations. Notice that the animations do 
not act the same when you rollover as they do when 
you roll off. See the margin note for more info on 
this. Close the test movie window. Perform the 
same basic procedure on the text for each of the 
other buttons. 


Select the Arrow tool and drag over frames 35 


through 65 on the H, O, M, and E layers. Select 
Modify>Frames>Reverse. Now add keyframes to 
the Actions layer on frames 30 and 65. Add Stop 
actions to frame 1, 30, and 65 on the Actions layer. 
Now we have an animation for Rollover and 
Rollout. Unfortunately, we're not finished. If 
Reverse Frames worked properly we would have the 
same stair-stepped pattern for the tweens between 
frames 35 and 65 as those between frames 1 and 30 
(only reversed). So, we have a little more work to do 
to make it right. 


6] Now Option/Alt-click on the dot below the 


Eyeball icon next to the Buttons layer (third 
layer below the Text MCs layer). This layer contains 
a series of light blue rectangles. These are all 
invisible buttons. The light blue rectangle is how 
Flash represents a button with no artwork in the Up 
State. The light blue shape is a representation of 
what is in the Hit State. The light blue boxes for the 
buttons will not be visible when you play the movie. 
Select the top button. 


9] To save time, copy and paste frames between 
movie clips that contain the same letter. For 
example, Portfolio has the letter o in it three times. 
You can copy and paste the Products MC O to the 
Portfolio MC O movie clip. The new Distribute to 
Layers feature opens the doors to many more text 
animation effects. Experiment and have fun. If 
you're not having fun, you're not doing it right. 
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.” These French Flash masters are 


ees Foiabaied % q eet a animated industry... 


mbitious and brash, this agency is out to be 
seen by as many people as possible. “We 
specifically work in content dedicated to 
large audiences,” says Laurent Tricart, 
Design and Communication Manager. With aname 
which translates as an eye foran eye, Oeil Pour Oeil 
has completed a growing number of entertainment- 
based projects for leading companies including Virgin, 
Sony and Honda, as well as organisations including 
the French Ministry for Youth and Sports — large 
audiences assured. 

The company was established in November 1996 by 
a team of four designers. These days, Oeil Pour Oeil 
consists of 60 people working in three areas: Web 


and new media, games for PC and console, and 
online communities. Oeil Pour Oeil Productions 
concentrates on the Web content, particularly Flash 
animation and interactivity. 

Content the company has created includes 
snowboarding demos, music-orientated Websites and 
a long-running adult series called Visiodrome, which 
attracts 20,000 visitors a month. “We'd describe our 
work as brilliant, fun, trashy and off the planet,” says 
Laurent. He admits that the team’s inspiration comes 
from the past and present — American comics, 
Japanese animation, psychedelia, rock-’n-roll, 
electronic music and hip-hop. “We're the digest of all 
these influences. A mix between underground culture 
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from the 70s and 80s and a creativity that is possible 
in today’s media.” 

Much of the company’s work, from Web to 
television, is created in Flash. Laurent explains its 
progression towards the software. “We discovered 
Flash in 1998 while creating a Spanish site, and we 
were immediately impressed. Before that we worked 
mainly in Director.” Four years ago, Oeil Pour Oeil was 
one of the first agencies to be producing such content. 
“Flash was a revolution — our own site was an event in 
France and, today, it is still a reference for many Web 
designers. A Website we made for comedian Alain 
Souchon, was one of the first Flash sites to capture a 
large audience in France and we're proud of it.” 

An exciting and recent opportunity for the 
company’s Flash designers is the production of a 
number of series for television broadcast. Loana et ses 
Amis is one of the first animated series to be shown on 
television. The 32 one-minute episodes each took 
three days to produce. “With the TV standard, you work 
differently — more complex animations, more 
elaborate, longer frames and slower lip sync.” But 
despite the difficulties, it was a positive experience. 
“Flash gives you more freedom when working for TV. 
You can take the entire package to its limits before 
converting the files to QuickTime, then Betacam.” 
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Oeil Pour Oeil shares a regional affiliation with 
some of the leading new media agencies in France. In 
the North Eastern region surrounding Lille, reside 
TEAMcHmAn ({w] www.teamchman.com), NOCOPY 
({w] www.nocopy.com), T.0.K.T.O. ([w] www.tokto.com) 
and AnalogiKS-IndianS.com ([w] www.analogiks- 
indians.com), each carving its own particular niche in 
the Flash, gaming and interactive media industry. 
Despite the potential overlap, they all know each other 
well and often participate in joint projects. “We have 
worked together in different Webjams such as 
WebDaysigner and Vector Lounge and we go to shows 
as a group,” says Laurent. “It’s a community — with 
friends, lovers and all. Nevertheless we are still 
competitors and try to keep loyal.” 

Work in the pipeline for the Oeil Pour Oeil team 
includes an online campaign for Swatch. Laurent also 
alludes to a Flash and Shockwave 3D convergence in 
the near future. And from his perspective, the outlook’s 
getting gradually brighter. “We're collaborating with 
companies who want to launch big and serious 
projects. There was an hysterical period within the 
industry that was closely followed by a downfall. 
Today, it’s time to get serious.” EE 


1. Visiodrome is an ongoing 
interactive comic project that Oeil 
Pour Oeil has invested much time 
and effort into designing. The brash 
characters and colours 
demonstrate excellent 
manipulation of Flash. 


2. Designed for television, L’Epine 
de Succession was also created in 
Flash, marking a great opportunity 
for Flash designers to expand 
their audience. 


3. The team also developed a 
Website for NAUSICAA, an 
organisation in aid of sea-life 
conservation. The site, which can 
be found at [w] www.nausicaa.fr, 
features innovative navigation 
and imagery. 


4. Oeil Pour Oeil has animated a 
number of cartoons for television 
using Flash rather than high-end 
broadcast software. Featured here 
are scenes from Le Secret Minceur 
(The Secret of Slimming) and 
Murder et Scoty, both series have 
aired on French TV. 


5. When French songstress 
Frangoise Hardy needed a site 

to reflect her changing career 
since the 60s, Oeil Pour Oeil came 
up with an elegant and attractive 
site with great audio at 

[w] www.francoise-hardy.com. 
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Creating a Flash 
screensaver 


Continuing from last issue's Animating in 
Photoshop tutorial, Flash offers you the 
ultimate flip book with plenty of tricks up its 


animated sleeve... 


he first part of the tutorial, 

( from last month’s Photoshop 
special, illustrated the 
various effects and 
distortions that can be used to create a 
series of shaped compositions. This 
tutorial is going to look at designing 
movements within controlled moments 
as one frame disappears and then 
reappears into another. Think of the 
effect of a cushioned flip book that 
offers a smooth transition and happens 
to be very forgiving as one image moves 
to the next. 

We're going to use last month’s 
Photoshop images as if they were 


carefully placed dominoes, each piece 
tumbling into the next to emphasise a 
series of transitions. 

To wrap up this animation, we'll show 
you how to use the ScreenTime Media 
software that is on the cover CD to 
convert your animation into a 
screensaver for either a Mac or PC in just 
three easy steps. 

Don't worry if you missed the first 
tutorial, because everything that’s 
needed to put this animation together is 
in the Tutorial\Screensaver folder on the 
cover CD, including a series of prepared 
Photoshop cells to use and the Flash file 
to dissect at your leisure. > 


Part 1: Creating your main movie in Flash 


Placing the sequenced JPEG images and animating their opacities... 


Editing multiple 
frames 


This is a great a way to 
manipulate many objects across 
many frames. By clicking the edit 
multiple frames icon, and 
dragging the frame selector 
within the Timeline over the 
desired number of frames, you 
can reposition, scale or apply any 
other transformation within the 
selected group. 


Exporting as an AVI 


If you wish to save your Flash 
animation as a different format 
(for example, an avifile) it is 
important to understand the 
limitations of the program. The 
movie clip symbols will not be 
rendered in the AVI, unless you 
have all your tweens within the 
main Timeline. 
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g After saving each JPEG still for Web within 
Photoshop, you are ready to import them into 
Flash. In the file menu click Insert>New symbol 
(Command/Ctrl+F8). to bring up the create new 
symbol dialog box and select the movie symbol 
type. Call this movie mainmovie. Flash will then go 
into the Edit mode of this symbol. Go to the File 
menu and choose Import. Choose the first graphic 
of the stills that are provided on the CD 
(step01 jpg). Flash will prompt you to import all or 
only the selected graphic. Choose all. 


4 | Now that we have our first still as a graphic 
symbol, we are going to animate its opacity. In 
the Timeline, click on frame 10 and go to the file 
menu, click Insert>Key frame (F6) to place another 
keyframe there. Click the first keyframe now, and 
go to the File menu and click Modify>Instance 
properties (Command/Ctrl+l) which will bring up its 
interface. Select opacity and drag it to 0 per cent. 
Go to frame 10 again and adjust its opacity to 99 
per cent (this will prevent any slight movement of 
the graphic). 


=3 We will now organise all the sequenced still 
images in our new movie clip. In the Timeline 
of mainmovie, you will notice several keyframes 
displayed one after another. Create a new layer in 
the Timeline by clicking the + icon at the bottom of 
the Timeline's interface. We will now place each 
imported still into its own layer, one at a time. 
After pressing the + icon you will notice a new layer 
with 1 empty keyframe above the original layer. 
Delete layer 1 by highlighting it and then clicking 
the trash icon. You now have one empty layer in 
your main movie. 


SS 


| 

ay Press Command/Ctr+L to bring up your 
library that lists all the objects in your scene. 

Select the first imported still (step01.jpg) and drag it 
onto the stage. While the image is selected, use the 
align dialog box (Command/Ctrl+K) to position the 
graphic at the centre of your mainmovie clip. Make 
another new layer, copy the aligned graphic and 
paste it into this layer. With the graphic still selected 
on your stage, go to the File menu and click 
Insert>Convert to Symbol (F8) and create a graphic 
symbol called step01. 


5 | We are now going to animate between the 
still's two different opacities. Click any frame in 
between the two keyframes, and go to the File 
menu and click Modify>Frame (Command/Ctrl+F). 
Click the tweening tab and select motion from the 
combo box then press OK. You should now see a 
blue arrow between the two keyframes. If you drag 
your mouse in the Timeline over the arrow you will 
see the animation on the stage. 


Now that we have our first animation, we are 

going to make a new layer in the Timeline, and 
insert a new keyframe (F6) at frame 10. Drag the 
next graphic (step02.jpg) from the library onto the 
stage filling the empty keyframe with that graphic. 
Be sure to align (Command/Ctrl+K) the graphic to 
the centre of the mainmovie. Convert the graphic 
into a symbol (F8) and place another keyframe at 
frame 20. Adjust the first keyframe to O per cent 
Opacity and the last keyframe to 99 per cent opacity 
(see step 4). Keep placing your graphics, one after 
another, and be sure to position them correctly and 
turn them into graphic symbols so each can have 
their opacities fade one into another. 


Part 2: Modifying frames to create the illusion of speed 


Adjust the number of frames between image fades to change the speed of moments within the animation... 
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ft) After you have set up all your fades (images 
1-101 in the Tutorial\Screensaver folder on the 
cover CD) you will notice each transition takes up 
the same number of frames. The amount of time it 
takes to move from one image to another is equal. 
For example, you will notice that from frame 13 to 
63 the ghost flies very slowly and smoothly off the 
screen. To create a sense of speed, you must 
eliminate intermediate frames. 


To manipulate this time frame, select a frame 
between the two animated keyframes (the 
frames marked by the blue arrow) and move the 
scroll bar of the Timeline up to the top. Hold the 
Shift key and click the top frame such that the entire 
column of layers is affected. Now press Shift+F5 to 
delete 1 frame from all those selected layers. Keep 
pressing Shift+F5 to quicken the selected animation. 


3 | If you run the movie you will find that the 
ghost now whips off the screen in this section 
of the movie. You can also add keyframes to the 
animations by pressing just F5 instead of Shift+F5 
while a column is selected in your Timeline. 


Part 3: Around and around we go 


How to make your movie clip loop seamlessly... 


Opacity tweening 
When dealing with graphic 
bitmap symbols fora smooth 
transition (without any possible 
unwarrented movement) do not 
use a value of 100 percent when 
fading in, rather use 99 per cent. 
This will ensure a proper fade. 


Be Highlight the first layer and copy the first key 
frame in your “mainmovie” clip. Make a new 


layer at the top of the stack and place an empty key 


frame in the very last frame of that layer. 


2 Highlight and copy the first frame of the 
bottom layer (in the file menu click Edit>Copy 
frames). Paste it into the recently created empty key 
frame at the top of the stack (in the file menu click 
Edit>Paste frames). 


a Skip 10 frames ahead and place a new key 
frame (F6) there and adjust the first key frame 
opacity to 0 per cent and the last to 99 per cent 
(Command/Ctrl+l). Add a new frame (F5) to the 
layer below the very last key frame. If you run the 
movie you should see the end of the movie fade 
into the opening image at frame 1. 


Part 4: Preparing backdrop and masks 


Planning the position of your masks on the backdrop in Photoshop... 


Align Tool 


In Flash press Command/Ctrl+K 
to bring up the align object box. 
Using this feature you can 
quickly orient your objects within 
the scene or space objects 
evenly apart. Make sure you 
have the Match page size 
checkbox checked. This is a 
useful tool to evenly separate 
objects from one another. 


The first thing you need to do is decide what 

dimensions your screen saver is going to be. 
Generally a canvas size of 1024x768 will produce 
consistent results among a variety of resolutions. 
Open the prepared backdrop.jpg in Photoshop. 


You must map out where you are going to 
want your animations on the backdrop 

graphic. Make a new layer and mark out the areas 
with the Lasso tool. Once you are confident with 
their placements, fill the selection with red. This will 
be your designated mask. For your convenience, 
there is a mask layer available in the Photoshop file 
(theangelscreensaver.psd). 


Highlight the mask layer and press 
Command/Ctrl+C which will create the 

appropriate selection. Now make a new document 
by pressing Command/Ctrl+N, which will keep the 
dimensions consistent for your mask. Paste the layer 
into this new document Command/Ctrl+V. Make a 
new layer underneath the current one and fill it with 
black. Save this file as mask.gif with two colours 
only (use Export to Web option and select GIF with 
two colours in the options box); red and black. 


Part 5: Invite the moving imagery into your design 


Set up your dimensions and import your objects into the Flash movie... 


The Inspector 


Press Alt+Ctrl+l or 
Option+Command+! to bring up 
the Inspector. This interface is 
great for quickly gathering 
information about specific 
objects in your scene. As you 
highlight various elements 
within your composition the 
Inspector will relay every detail 
about them. 


aS Go to the File menu and choose Import. In the 
dialog box, pick the location of the images you 
saved earlier and select the backdrop image 
(backdrop.jpg). This will automatically place the 
graphic into your scene. Press Ctrl+Alt+! (PC) or 
Option+Command+ (Mac) to open the Inspector 
dialog box, and under its position values, enter O for 
both the x and y textfields. 


6 Make a new layer and import mask. gif into it. 
Press Command/Ctrl+K to align the mask. gif 
directly on top of the backdrop. jpg. In the File 
menu, click Modify>Trace bitmap and use these 
settings: colour threshold=4, minimum area=2, 


curve fit=pixels, corner threshold=many corners and 


press OK. The mask.gif is now a vector image, you 


can select the black and press backspace to delete it. 
Select one of the masks and press Command/Ctrl+X 
to cut it from the scene. Make a new layer and paste 


in place (Command/Ctrl+Shift+V). 


3 | pasting each one in place on their respective 


Make a new layer for each mask, cutting and 


layer and name them accordingly. You are now 
ready to place your mainmovie clip into the scene 
under the main mask. > 
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Part 6: Prepare to give life to your scene 


Placing your movie within the backdrop... 


Naming layers 


It's a good idea to name your 
layers in Flash, Make it a habit to 
name each object as you create 
them. This makes navigating 
much easier as your scenes can 
get very complicated. Naming a 
layer in relation to its position on 
the stage is a great example of 
helping you identify and orient 
your scene's objects. 


Pt) Make a new layer under the mask that will 
reveal the mainmovie clip. Drag from the 
library your symbol called mainmovie and place it 
onto the stage. (When placing objects onto the 


scene, be sure you have the correct layer selected!). 


2] Position the mainmovie clip under the mask. 
Right-click (PC) or hold-click (Mac) the 
mask layer and select mask. You will now see 
that the masked mainmovie has integrated with 
your backdrop. 


3 | Go to the + icon and make a new layer 
under each mask. This will prepare you for 
the various movie clips that will be placed within 
the backdrop. 


rr ices 
Part 7: A collage of movement 


Be resourceful by duplicating your animation into a series of miniature movies within the design 


Using the Library 


Try to avoid editing your symbols 
on the stage. Instead, always 
keep your library open. Press 
Command/Ctrl+L and edit the 
symbols from within this 
interface. This will prevent you 
from unintentionally moving a 
symbol within the stage. 


Locking layers 


Keep your layers locked at all 
times. This will prevent you from 
editing the wrong object. Edit 
only the layer you are working on, 
and once finished, lock it again. 
You can lock all layers 
simultaneously by clicking the 
lock icon located at the top left of 
the Timeline. 


i In the library, right-click (PC ) or Option-click 
(Mac) on the mainmovie clip and choose 
duplicate movie clip. Give it an appropriate name, 
that will reflect its location within the design (for 
instance, top right mask). Now right-click (PC) or 
Option-click (Mac) on the mainmovie clip in the 
library and choose edit. 


4 | Drag that clip onto the stage beneath the 
appropriate mask and right-click (PC) or hold- 
click (Mac) on the mask layer and choose the Mask 
option. You may want to scale the duplicated clip so 
that it fits the mask’s composition. To scale the clip, 
right-click/Option-click the clip on the stage and 
choose Scale. You can also flip the image in any 
direction using the Scale tool. 


Once you have identified a favourable 

segment within the mainmovie clip, extract it 
by highlighting a block of frames by clicking the first 
keyframe. Hold the Shift key and click the last 
keyframe. This will create a block selection around 
that period in the Timeline. In this case, the ghost 
animation was been extracted. Now press 
Alt+Ctrl+C (PC) or Option+Command+C (Mac) to 
copy those frames. Note: do not select more than 
50 frames per mini clip. 


5 | You should now have two movies placed 
within your backdrop.jpg. Repeat this process 
until each mask is occupied by a different segment 
of the mainmovie clip. 


a In the library go to the new movie clip you 
created, right-click (PC) or Option-click (Mac) 
on it, and choose edit. Select the empty keyframe 
in the clip and press Alt+Ctrl+V (PC) or 
Option+Command+V (Mac) to paste the frames of 
animation you just copied. Make sure that you 
loop the animation as previously described earlier 
in the tutorial. 


G Be careful when putting your mini clips into 
the scene. If your screensaver contains too 
many animations that are too large it will be too 
CPU-intensive for most machines. The end result: 
the movie will lose its smooth flowing quality and 
appear to chug from image to image. 


Part 8: Adding the final touches 


The hooks shall now make their appearance... 


Hiding layers 

Use the Transparency option (the 
eyeball icon) in the Timeline for 
positioning layers. This comes in 
very handy when overlaying 
movie clips on bitmap 
backgrounds to align them 
correctly. Repeatedly toggle a 
layer’s visibility to ensure correct 
placement, and zoom in. 


Matting the 
screensaver 


If you designed your screensaver 
to be locked at 1024x768, then 
there will be matting for monitors 
displaying at a higher resolution. 
To set the matting colour, simply 
click Modify>Movie and select a 
colour from the colour box 
located at the bottom right of the 
dialog box. 


The final steps involve incorporating the 

design and the animations by adding 
movement to the interface. A series of hooks will be 
placed to relate to the typography and the 
animations as they randomly appear and disappear. 
Import the hooks from the Hooks folder within the 
CD and place it on its own layer in Flash. 


Go to the File menu and click File>Export 

movie. Choose SWF as the format and 50 per 
cent JPG quality to conserve on filesize. Pick a 
name and location for the SWF. 
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Qj ScanWise Images 
screen saver 
screensaver-final.swf 
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1 | Open the SWF file in the the Flash player and 
save it as a Projector file. After this has been 
completed, close the Flash player. A diamond- 
shaped icon should appear on your desktop. 
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2] Make sure that the layer is matched up with 
the type and make each hook image a movie 
clip symbol (see Creating your main movie in Flash 


for reference). Edit each movie clip symbol and 


make a graphic symbol of the hook so that you can 


fade them in and out. 


Load the ScreenTime application located on 

the CD. You will see five tabs: content, 
properties, settings, installer and build. In the 
content tab, select the location of the SWF. In the 
properties tab, give your movie a name and either 
use the SWF as a thumb or make your own to be 
displayed during the screensaver installation. 


Open the application ScreenTime and under 
the File menu, select Convert Projector. 


Browse for the file that you have created and open 
it, give ita name, and convert the file. 
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Pa Create a unique Timeline (for example, make 
each hook movie a different length) so that 
during the animation's playback, the hooks will 
appear and disappear randomly over time. Try not 
to animate all the hooks at the same time, because 
it's CPU-intensive and will reduce the overall 
performance of the animation. 


r 3 | Adjust your settings to your liking in the 
settings and installers tab, and finally click 
Build to make the screensaver. You will be prompted 
to save your Screentime settings, then click 
continue. You will now have an executable ready to 
be installed on any PC system! 
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Once the file has been converted, a new icon 

(a movie reel) will appear on the desktop. 
Simply drag the icon into your Control Panels. You 
can set the idle time of your screen saver by 
double-clicking the file. 
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The new powers of ActionScript 


Scripting has evolved in the new version of Flash. Find out just how much has changed with 
this analysis of the new scripting features, and take your first steps into Flash MX scripting... 


lash MX is promoted by Macromedia as 
being more than just a new version of Flash; 
| it's claimed to be the first step in a new way 

ie of developing rich applications for the Web 
and other interactive platforms. Only time will tell 
exactly how justified this claim is. It’s clear that Flash is 
only the first of the Macromedia product family to 
receive the MX treatment. 

It’s hard to assess how significant some of the 
changes to Flash MX are, because they relate to server 
products that haven't been released yet. The vision 
emerging, though, is one of a powerful integrated 
platform consisting of both server and client 
applications that will enable the rapid development of 
rich applications, including real-time messaging and 
the ability to stream a variety of content through a 
Flash MX front end. 

Flash MX will also make life easier for users by 
helping developers to create accessible, consistent, 
high-performing interfaces. Most of the power to 
achieve this lies in functionality that is accessed 
through ActionScript. 


Raising the bar 


One of the consequences of the changes to 
ActionScript in Flash MX is that it is now a little less 
obvious how to do simple things, especially if you are 
just beginning to get to grips with applying Actions in 
Flash. The Actions menu is now formally arranged, with 
everything in its correct location. In Flash 5, the 
Actions menu was similarly strictly organised, but it 
also offered a Basic Actions menu that contained the 
most commonly used commands. 

The Basic Actions menu may have been a mishmash 
of commands from all over the place, but it was a 
useful subset for beginners to focus on. That menu has 
gone, and some beginners may well be put off by the 
formal language and complexity of the restructured 
Actions menu. The important commands for beginners 
(such as goto, getURL, stop and play) are easy enough 
to find provided the user opens the Actions category in 
the menu pane. In the pane are sensible titles like 
Movie control, Browser/Network, and Movie Clip 
Control which group together related commands. 


The interactive features of Flash have been greatly 
enhanced in the new release, but not in the completely 
earth-shattering way that one might expect from the 
description of Macromedia's aims for the new product. 
And that’s a good thing. For anyone who invested time 
and effort in learning Flash 5 ActionScript, that 
investment has been protected in Flash MX. Much of 
ActionScript remains unchanged in this release, and 
the many improvements to the language are 
essentially incremental in nature. Nothing should 
break when you bring Flash 5 scripts into Flash MX. 

Aside from the new features, Macromedia claims 
that the speed of ActionScript has been greatly 
improved in certain key areas, such as string, XML and 
array handling. 

See the boxout on page 90 for more highlights of 
the changes to scripting in Flash MX. 


Changes to the ActionScript Editor 


The Actions editor still has the Normal and Expert 
modes that were introduced in Flash 5. In Normal 
mode, Actions have to be inserted from the list or 
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menu, and customised using the Options panel, which 
has been moved to the top of the Actions palette. 
Working in Normal mode is slow and prone to errors 
when constructing complex commands such as If...Else 
statements. In Expert mode, you can type freely into 
the Editor window in addition to choosing from the 
menu options. But, until now, there’s been no interface 
in Expert mode to help you write the commands. 

The new pop-up, Code Hints, offers the perfect 
compromise, enabling you to work in Expert mode but 
offering valuable help with syntax and options. If Flash 
recognises the command you're typing, a pop-up code 
hint window appears (after a user-definable delay) to 
remind you of the required syntax or choose from a list 
of modifying attributes. 

As wellas a range of buttons for common tasks like 
find and replace, the editor window now offers a script 
navigation menu, which lists all the locations where 
scripts are likely to be defined in the movie. This 
means you don't have to spend so long hunting for 
elements in the movie to check or change their actions. 
You can also pin the current script in place, so that you 
can select other items on the stage without losing sight 
of the script you’re editing at that moment. 

The addition of line numbering in the Editor is 
welcome in Flash MX, as is the customisable syntax 
colouring and the customisable auto-formatting for 
code layout. Small details, such as the editor 
automatically indenting nested lines of code and 
moving closing curly braces (“}”) back to the left 
margin, make coding in the new version a real 
pleasure compared to Flash 5. 


Anatomy of the Actions palette 


w Actions - Frame 
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1. Script navigation menu 

2. Hint area (Normal mode only) 

3. Options panel (Normal mode only) 
4. Button to expand menu pane 

5. Actions menu 


6. Remove selected action 


& GotoandPlay — 


goto : Go to the specified frame of the movie 
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7. Find 

8. Find and replace 

9. Browse for target path 

10. Options menu 

11. Pin/Unpin current action 
12. Hide hint area 
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13. Reference button 

14. Move selected action up 
15. Move selected action down 
16. View options 

17. Debug options 
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Helpfully, the Editor now remembers whether it is in 
Normal or Expert mode, instead of remembering the 
last mode it was set to for individual objects. 

The Actions menu, accessed through the left pane 
or the plus menu, has been revised substantially in this 
release. It’s now much more hierarchical, and methods, 
properties and events are listed under separate menus 
for each object. The Basic Actions menu is gone, and 
the commands it contained have been redistributed 
into the hierarchy. Some, like the venerable Tell Target, 
have been relegated to the new Deprecated menu. 


Reference panel 


When the code hints aren't enough to help you use a 
command, or when you are exploring the commands in 
the hierarchical menu pane, you can use the new 
reference panel to obtain a detailed description of the 
command and its usage. 

The Reference panel contains the same information 
as the ActionScript reference in the manualand online 
help, but it’s integrated into the Flash environment so 
that information on any command is presented with 
the press of a button. Because you're not juggling an 
open browser window as well as the Flash interface, it’s 
easier to make convenient use of the information. 

You can summon the relevant information for any 
command in ActionScript by clicking anywhere in the 


name of the command and clicking the Reference 
button in the Editor toolbar. You can also highlight an 
option in the menu pane in the Actions palette and 
obtain reference information about it without having to 
use it in the editor. 

The online help has not been made obsolete by the 
Reference panel. The information in the Reference 
panel essentially contains general information about 
the command, whereas the ActionScript Dictionary in 
the online help gives more detailed information. 


Components 


Flash MX introduces a revamped version of the Smart 
Clips from Flash 5. Called Components, these are 
scriptable interface elements that you can add quickly 
to your project to create common widgets like 
scrollbars, radio buttons, select menus, and so on. 

A basic selection is supplied with the product, and 
an enhanced set is available for download from the 
Macromedia site. 

Components are designed to be reused without 
much coding, and can speed up interface work in 
Flash. They can be customised with user-definable 
skins, so that they can be easily integrated into the 
visual style of your project. 

Each type of component has a substantial set of 
methods that can be used to control component 


“The changes to ActionScript in Flash MX 
serve to consolidate the excellent scripting 
features of the previous version” 


New ActionScript highlights 


Editor 

Revised interface, line numbering, 
customisable syntax colouring, auto- 
formatting of code layout with via scripting. 


customisable settings, object selector 


Drawing API 
New drawing methods enable the 


creation of artwork at run-time 


Data integration 

New server API and event model will 
allow real-time display of data through 
the Flash front end. Flash now has the 
ability to store data on the client 
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menu, ability to ‘pin’ scripts in view so 
that they remain visible when editing 
other objects. 


Components 

Reusable, scriptable, prebuilt 
interface components such as scroll 
bars, menus, and radio buttons are 
now supplied, with more being 
available for download. 


Named anchors 

Frames in the Timeline can now be 
labelled with named anchors enabling 
the use of the browser Back button, 
making Flash movies more accessible 
to screen reader software. 


System capabilities 

System features such as screen 
resolution can be detected at runtime, 
and changes made to layout or 
functionality accordingly. 


Reference panel 
Complete language reference now 


available within the Flash environment, 
with links to the code editor so that you 
can look up features of acommand as 
you use it. 


machine for use on other occasions 
using SharedObjects. 


Dynamic content 
Dynamically download and play 
JPEG images and MP3 sounds at 
run-time without embedding them 
into Flash first. 


Event and object model 
Create new listeners for mouse, data 
and keyboard events. Textfields and 
buttons are now scriptable objects, 
with their own new properties and 
methods available for use. 


elements via scripting. The components have a 
standard API (Application Programming Interface), 
which enables developers to access and control 
properties such as whether an individual element is 
enabled, its size, the registration of new skin elements 
and so on. For most uses, you don't need to add 
additional code. Components self-configuring as far 
as possible, so you'll only need to use the commands 
inthe API when you want to move beyond the basics. 


Data integration 


Macromedia has put a lot of thought into the 
integration of Flash with data-driven applications, and 
there are several new ActionScript features that 
empower this sort of development. However, some of 
these features are designed to integrate with a new 
series of server products that aren't yet available. 
Flash MX offers data integration in the following ways: 
* Loading information into variables or sending data 
through HTTP request/response (same as in Flash 5) 

+ Loading information into variables or sending data 
through a direct connection with the server, either 
using XML through a socket connection or the new 
LoadVars data API 

+ Loading information from or storing data in local data 
structures, using the new SharedObjects feature 
(similar to browser cookies). 


Named anchors 


One of the biggest drawbacks with Flash Websites 
arises from the way the browser treats a Flash movie as 
a single element within a Web page. This means that 
although the movie may contain many pages of 
information, the user’s navigation through that content 
is not part of the browser history. Clicking either Back 
or Refresh in the browser will lose the user's place in 
the movie: firstly, the browser will load the page before 
the one containing the Flash movie; and secondly, the 
browser will reload the page. In either case, this resets 
the movie to its beginning and impairs the user 
experience when navigating Flash content. It’s been 
impossible to give someone a URL to take them 
directly to a particular piece of content in the movie — 
until Flash MX, that is. 

In Flash MX, you can set a frame labelto bea 
named anchor. When the user clicks a button to take 
them to that destination in the movie, the browser is 
actually given a new URL to load which consists of the 
page name followed by a hash (#) and the name of the 
frame label. It’s formed exactly like an HTML page 
anchor. The Flash 6 Player takes that information from 
the browser and uses it to display the correct 
information within the Flash movie. 

The effect of this is to restore the functionality of the 
back and forward buttons in the browser even when 
navigating within a single Flash movie, provided that 
named anchor frame labels are used as destinations 
for all internal navigation. This also enables the 
bookmarking of Flash content, and the ability to send 
someone a more accurate URL to take them to a 
certain part of the movie. To make using this feature 
easier, Flash can automatically give the first frame of 
each scene a named anchor frame label. 

To make this feature work when the page is 
published, you need to publish the movie in an HTML 
page exported using the appropriate template (Flash 
with Named Anchor) in the HTML Publish Settings. 
This simply has the effect of listing all the named 


Using the drawing API and dynamic content features 


createEmptyMovieClip(logo™1) 

with (logo) { 
beginFill(0x333366,60), 
moveTo(0,300) 
curveTo(200,500,400,100) 
curveTo(175,450,0,300) 

} 


ga We'll start by creating a new empty movie clip. In Flash MX, we don't need to use an 
existing clip as a container; we can create one completely from scratch. In the beginFill 
method, the second parameter is the alpha transparency of the fill. The drawing methods 
operate when the movie is played. The drawing commands operate in a similar way to 
PostScript, effectively moving an invisible pen around the drawing space. 


createEmptyMovieClip(“logo”,2) 


createEmptyMovieClip( sandy”) 
sandy.createEmptyMovieClipCimage”,]) 
loadMovie(sandy.jpg”_root.sandy.image) 


| 2 | Using the Load movie command, we can import a JPEG image in the same way as SWF 
files. In this example, we use the createEmptyMovieClip action to create an image clip 
inside a container movie clip. We then replace the image clip using the loadMovie 
command and a target path. 


createEmptyMovieClip(togo”,2) 


with (logo) { 
beginFill(0x333366,60), 
moveTo(0,300) 
curveTo(200,500,400,100) 
curveTo(175,450,0,300) 
} 
createEmptyMovieClip(“sandy”1) 
sandy.createEmptyMovieClip(image”]) 
loadMovie(“sandy,jpg”_root.sandy.image) 


By combining the previous two examples, we can create a whole layout completely 
through scripting. 


anchors from the Flash movie as empty anchor links in 
the HTML, which is required for the browser to pass the 
anchor information correctly to the player. 


Dynamic content 


One of the biggest benefits of Flash for Web design is 
the way that once a movie has loaded, navigation 
within the movie is instantaneous. However, if the 
movie contains a great many images or sounds, 
downloading all the data in the movie can make the 
initial loading process take too long. 

There is a particular problem if different visitors to 
the site are going to use different bits of the content; 
this means that any one visitor is going to have to 
download much more content than they will actually 
need. Until now, the solution has been to structure the 
movie as separate SWF files and use Load Movie 
actions to link it all together, which brings its own 
problems of download delays and editing complexity. 

In Flash MX, you can use the new dynamic content 
features to script the movie so that JPEG images and 
MP3 sounds are downloaded separately from the SWF 
file; they still play back as part of the Flash movie. This 
means that the project can be created as a single 
movie without the download penalty that used to be 
associated with this option, and you can use variable 
data to reference the images or sound files as external 
content. This result is that both the images or sound 
data and the information about the references and file 
names can be loaded dynamically at run-time. 


with (logo) { 
beginFill(Ox333366,60), 
moveTo(0,300) 


curveTo(200,500,400,100) 


curveTo(175,450,0,300) 
} 


createEmptyMovieClip(Csandy”]) 
sandy.createEmptyMovieClip(Cimage”]) 
loadMovie("sandy.jpg”_root.sandy.image) 


sandy.setMask(logo) 


4 | Finally, we call the setMask method of the container movie clip for the image, using 


the logo clip as a mask. This is why we used two nested clips for the dynamic image; 
once the imported image has replaced the image clip, it no longer has the properties and 
methods of a normal movie clip, and the setMask method is not available for the image clip. 


To dynamically display an image, use the loadMovie 
command, referencing a JPEG image instead of a SWF 
file. To dynamically load a sound, define a sound object 
as usual in the script, then use the loadSound method 
of the sound object to reference the external MP3 file. 


Drawing API and graphical scripting 


The graphical abilities of Flash have been extended in 
unexpected directions in Flash MX. Chief among the 
new features here is the introduction of a drawing API, 
which includes methods for drawing straight lines, 
curves, strokes and fills via scripting. For developers 
familiar with how PostScript operates, the new drawing 
methods will be second nature. 

Macromedia has also introduced scriptable masks, 
which means that using scripted behaviours, designers 
can create dynamic masking effects that selectively 
hide or reveal artwork. See the sidebar for an example 
of these new features in action. 


Event and object model 


Flash MX boasts a revised event model, together with 
new Listener objects that detect the mouse, keyboard 
and data events in a more predictable, consistent and 
intuitive way. Listeners can be defined for movie clips, 
buttons and other objects — each class has its own 
listeners that capture specific events related to the 
object in question. Listeners don't have to be defined in 
the objects to which they relate, you can create 
listeners anywhere, such as in the main Timeline. 


Text fields are now instances of a TextField object 
class, which has an interface enabling properties like 
size, text formatting, colour, border, tabbing and so on 
to be controlled by scripting. There is also a TextFormat 
object that offers control of text appearance. 

One implication of this change is that dynamic and 
input text fields now have instance names as well as 
being bound to specific variables. This is much clearer 
to work with than the previous situation; for example, 
we can now set the scroll property of the text using the 
name of the text field rather than that of the text 
variable inside it. However, for backward compatibility, 
setting the scroll property still works if you set 
scrolling using the variable name. 

Buttons are now scriptable objects in their own 
right, and have their own properties and methods as 
wellas event handlers. 

Movie clips now understand mouse events directly, 
which greatly simplifies the structure of interface 
objects that used to require buttons nested inside 
movie clips in order to provide mouse event detection. 
Movie clips with mouse event handlers applied to 
them are now known as button movie clips. 

Even the movie properties are scriptable using the 
new Stage object. This offers properties such as stage 
alignment, width and height, and the scale mode for 
scripting, as well as a new onResize event which fires 
when the onscreen size of the movie changes. 

The only apparent lack in the new object model in 
Flash MX is the absence of properties and methods for 
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controlling embedded video. The new Video object 
only contains one method, clear(), which removes a 
movie with a given instance name from the stage, but 
only if it isn't playing. If the movie is playing, the effect 
of the clear() method is simply to skip a frame. 

The intention appears to be that video objects 
should be embedded into movie clip timelines, which 
means that you can use normal timeline controls such 
as stop, goto and play to control the movie clip and 
thereby the embedded video. 


System capabilities 


Where device-specific information is required about 


running, there's a new system capabilities object which 
enables the detection of characteristics like screen 
width and height, the colour depth, and other factors 
such as the availability of sound and video support. 
This information can be used to customise the 
movie, or to control whether certain assets are going to 
be displayed or not. This is going to be of increasing 
importance, as we see Web and Flash content being 
deployed for a greater range of devices, such as the 
new Pogo PDA, PlayStation 2, PalmOS, Windows CE, 
and so on. Using a simple Flash movie, we can detect 
the capabilities of the device and decide what to 
deliver to it without necessarily creating several 


Conclusion 


Overall, the changes to ActionScript in Flash MX serve 
to consolidate the excellent scripting features of the 
previous version. By exposing more of the object 
model to scripting, through the new drawing API and 
graphics features and with the revised event model, 
Macromedia has set the stage for a new generation of 
cutting-edge design. Over to the Flash community to 
take the new features and run with them... EEE 


the environment within which the Flash movie is 
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New ActionScript commands 


independent versions of the content. 


Flash MX has many new ActionScript commands. For information on any item, locate it in the Reference panel menu 


pane using the alphabetical Index list. Or, look in the Flash MX online help in the ActionScript Dictionary... 


#initclip 
#endinitclip 
setinterval 
clearinterval 


— 

switch 

default 

case 

call function 

method 

_focusrect 
arguments.caller 
arguments.length 
Array.sortOn() 
Function.apply) 
Function.call() 
Function.prototype 

super 
accessibility.isActive() 
button.getDepth0 
button.tabEnabled 
button.tabIndex 
button.trackAsMenu 
button.useHandCursor 
button.onDragOut 
button.onDragOver 
button.onKillFocus 
button.onPress 
button.onRelease 
button.onReleaseOutside 
button.onRollOut 
button.onRollOver 
button.onSetFocus 
system.capabilities.hasAccessibility 
system.capabilities.hasAudio 
system.capabilities.hasAudioEncoder 
system.capabilities.hasMP3 


system.capabilities.hasVideoEncoder 
system.capabilities.pixelAspectRatio 
system.capabilities.screenColor 
system.capabilities.screenDPI 
system.capabilities.screenResolutionX 
system.capabilities.screenResolutionY 
key.addListener() 
key.removeListener() 
key.onKeyDown() 

key.onKeyUp() 

mouse.addListener() 
mouse.removeListener() 
mouse.onMouseDown() 
mouse.onMouseMove() 
mouse.onMouseUp() 
movieClip.createEmptyMovieClip() 
movieClip.createTextField() 
movieClip.getBytesLoaded() 
movieClip.getDepth() 
movieClip.setMask() 
movieClip.beginFil() 
movieClip.beginGradientFillO 
movieClip.clear() 
movieClip.curveTo() 
movieClip.endFill) 
movieClip.lineStyle() 
movieClip.lineTo() 
movieClip.moveTo() 
movieClip.enabled 
movieClip.focusEnabled 


movieClip.hitArea 
movieClip.tabChildren 
movieClip.tabEnabled 
movieClip.tabIndex 
movieClip.trackAsMenu 


movieClip.useHandCursor 
movieClip.onData 
movieClip.onDragOut 


movieClip.onDragOver 
movieClip.onEnterFrame 
movieClip.onKeyDown 
movieClip.onKeyUp 
movieClip.onKillFocus 
movieClip.onLoad 
movieClip.onMouseDown 
movieClip.onMouseMove 
movieClip.onMouseUp 
movieClip.onPress 
movieClip.onRelease 
movieClip.onReleaseOutside 
movieClip.onRollOut 
movieClip.onRollOver 
movieClip.onSetFocus 
movieClip.onUnLoad 
selection.addListener() 
selection.removeListener() 
selection.onSetFocus 
sharedObjectgetLocal() 
sound.getBytesLoaded() 
sound.getBytesTotal() 
sound.loadSound() 
sound.duration 
sound.position 
sound.onLoad 
sound.onSoundComplete 
stage.addListener() 
stage.removeListener() 
stage.align 

stage.height 
stage.scaleMode 
stage.showMenu 
stage.width 
stage.onResize 
textField.addListener() 
textField.getDepth() 
textField.getFontList() 


textField.getNewTextFormat() 
textField.getTextFormat() 
textField.removeListener() 
textField.removeTextField() 
textField.replaceSel() 
textField.setNewTextFormat() 
textField.setTextFormat() 
textField.autoSize 
textField.background 
textField.backgroundColor 
textField.border 
textField.borderColor 
textField.bottomScroll 
textField.embedFonts 
textField.hscroll 
textField.html 
textField.htmlText 
textField.length 
textField.maxChars 
textField.maxhscroll 
textField.maxscroll 
textField.multiline 
textField.password 
textField.restrict 
textField.scroll 
textField.selectable 
textField.tabEnabled 
textField.tabIndex 
textField.text 
textField.textColor 
textField.textHeight 
textField.textWidth 
textField.type 
textField.variable 
textField.wordWrap 
textField.onChanged 
textField.onKillFocus 
textField.onScroller 


textField.onSetFocus 
new TextFormat() 
textFormat.getTextExtent() 
textFormat.align 
textFormat.blockIndent 
textFormat.bold 
textFormat.bullet 
textFormat.color 
textFormat.font 
textFormat.indent 
textFormat.italic 
textFormat.leading 
textFormat.leftMargin 
textFormat.rightMargin 
textFormat.size 
textFormat.tabStops 
textFormat.target 
textFormat.underline 
textFormat.url 
video.clear() 

new LoadVars() 
loadVars.getBytesLoaded() 
loadVars.getBytesTotal() 
loadVars.loadQ) 
loadVars.send() 
loadVars.sendAndLoad() 
loadVars.toString() 
loadVars.contentlype 
loadVars.loaded 
loadVars.onLoad 

XML getBytesLoaded 
XML getBytesTotal 
XML.contentType 
customActions.get 
customActions.install 
customActions.list 
customActions.uninstall 
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Web page layout 


www. layout 


£18.99 


Authors 


Alastair Campbell 


Cassell & Co 


ISBN 


0304358010 


IP rofusely illustrated throughout, 
A this latest in the www. series 

‘ looks closely at Web page 
layout, but it leaves a lot to be desired. 

Aimed at the novice Web designer 
this book focuses on FrontPage and 
GoLive, completely ignoring HomeSite 
and Dreamweaver. It's worrying that 
within the typography chapter, the 
author says that text viewed on an Atari 
ST looks very different than on a PC or 
Mac. Considering this book was 
published in 2001, is there anyone 
designing on an Atari ST? 

If you want a brief overview of Web 
technologies and some of the tools and 
issues encountered, this book would 
further your understanding to a point. 
However, its bright mass of illustrations 
mask the lack of comprehensive and 
practical information that you could 
apply to your next project. 


Verdict 


Cou 


JavaScript design 


Designing With JavaScript (2nd Edition) 


Price 
£24.95 


Nick Heinle & Bill Pefia 


Publisher 


O'Reilly 


f you feel that you have hit a 

Hd creative barrier with HTML, 

’ then it’s time to learn the black 
art of JavaScript. This is the second 
edition of this excellent book where 
you can expect to conclude with a firm 
understanding of the key concepts of 
JavaScript and be confident in your 
abilities to write code that works. 

Divided into 11 chapters you begin 
with some easy steps that illustrate 
what JavaScript can do for your Web 
pages. Proceeding chapters cover more 
complex coding as you move from 
controlling windows, through dynamic 
images and on to combining JavaScript 
with DOM (Dynamic Object Model) and 
CSS (Cascading Style Sheets). 

Even if your programming knowledge 
is non-existent you will become a 
competent JavaScript programmer by 
the end of the book. 


Verdict 


SI SIC 


Web design 


Web ReDesign: Workflow that Works 


Price 

£34.99 
Author 

Kelly Goto & Emily Cotler 
Publisher 

New Riders 


0735710627 


Web ReDesign 


f you are about to design a new 
HA Website, or redesign an existing 
af one, this book will arm you with 

tried and tested methodologies that 
enable you to avoid many of the pitfalls 
that befall those who rush head-long 
into the design and coding phase. 

Based on what the authors call The 
Core Process you will see checklists, 
surveys, worksheets and hints and tips 
enabling you to enter the planning 
phase of your project with confidence. 
You will also see advice from such Web 
luminaries as Jakob Nielsen, Lynda 
Weinman and David Siegel. 

This is one of the first books to take a 
close look at Website development 
logistics and present real-world 
examples that successfully implement 
The Core Process. Overall, this is the 
missing link between inspiration and 
the practical realisation of a Website. 


Verdict 


CSUStSt 


Website building 


Back to the User: Creating User-Focused Web Sites 


rrice 


£27.50 


Authors 


Tammy Sachs & Gary 
McClain, Ph.D. 


Publisher 


uD 


New Riders 


0735711186 


- ased on practical field 
! m § research, this is an ideal 
J companion to Web ReDesign 


as it offers an overview of the planning 
and preparation to build a successful 
Website. This book looks at a plethora 
of salient research that needs to be 
done at a Website's inception. 

The first of six sections looks at the 
design process — what the authors call 
taking the 30,000 foot view. Further 
chapters delve into topics like how to 
make your site sticky, site design 
and navigation, and branding and 
marketing considerations. 

Ultimately, this is your first step to 
good user-centric Web design. With 
research tips, insightful anecdotes and 
allthe hard questions you should ask 
yourself at the end of each chapter, the 
authors have written a mantra that Web 
developers should learn off by heart. > 


Verdict 


DIN 


Photoshop | 95 | 


arts 


FrontPage 2002 


Microsoft FrontPage 2002 Inside Out 


£32.99 


Author 


Jim Buyers 


Publisher 


Microsoft Press 


0735612846 


f you’re looking for a complete 
| reference guide for FrontPage 
; 2002, this book will serve you 


well. However, you will need access to 
your CD-ROM drive to make the most 
from it as the author has included much 
of the material covered in later 
chapters only on the accompanying CD. 

This integrated approach is a novelty 
— one that has both advantages and 
pitfalls. Novice users who want to 
learn each of FrontPage’s features may 
find the constant accessing of the CD 
and the jumping around the manual 
slightly frustrating. 

However, as this book is written from 
the horse's mouth, as it were, being a 
Microsoft Press title, the content is 
authoritative and accurate. The 
CD/book combo won't suite all users, 
but it does offer an unusual take on the 
ubiquitous CD-ROM. 


Verdict 


SKK IE 


Web workshop 


Web Design Workshop 
Price 

£29.99 
Authors 


Robin Williams, John 
Tollett & David Rohr 


Publisher 
Peachpit Press 

ISBN 
0201748673 


1 Workshop 


Ea Photoshop 
ts 


1B eginning with an excellent 

p } glossary of jargon and terms 

=: that define the tools and 
technologies that you will encounter in 
proceeding chapters, this lavishly- 
illustrated book offers the Web design 
novice an excellent overview of the 
salient elements of good Web design. 

Read cover-to-cover, each chapter 
is a condensed design course that 
moves from building functionality and 
workflow to cascading style sheets and 
motion graphics. Although you see an 
excellent explanation of how cascading 
style sheets work, you won't learn how 
to write your own. 

All of the key design and aesthetic 
considerations are covered. Your 
journey should conclude with a clear 
understanding of the workflow that your 
new design needs to go through, and 
how this can be accomplished. 


Verdict 


SEDC 


Game programming 


Flash Games Studio 


£39.99 


Sham Bhangal et al 


Friends of Ed 


1903450675 


iP art of a quartet of books from 

Rt Friends of Ed, this edition offers 
dl high-level instruction on the art 
of Flash game programming. Novices 
who want to design games should read 
Foundation Flash 5 and Flash 5 Studio 
before this book. And if you're looking 
for a shortcut to games programming, 
this book isn't it. 

Some of the world’s best designers 
share their skills and illustrate what it 
means to code compelling Flash-based 
games. The first few chapters study the 
foundations that Flash games rest on, 
with chapter three being where you 
begin to code your first game. 

Useful in isolation but excellent in 
context with the other Flash titles in the 
series, this book unravels the code that 
sits behind the killer game you have in 
mind. This is structural engineering for 
Flash games design. 


Verdict 


SISK IEC 


Program integration 


Integrating Flash, Fire Works & Freehand f/x & Design 


£34.99 


Joyce J. Evans 


Coriolis 


1588801632 


‘ f you own all three of these 
i] programs you will need to 
spend some time familiarising 
yourself with their basic operation 
before you open this book, as it’s aimed 
at the intermediate to advanced user. 

The book claims to teach how these 
three packages can be integrated, but 
very little of this is taught. Each 
program is covered in turn and offers a 
good overview of its key features. 

The special projects chapter is 
perhaps the most useful, as you put into 
practice the skills learned earlier. 
Separately, each chapter is a good 
foundation course with the program 
concerned. It’s a pity that the author 
doesn't step back and show us where 
each program overlaps and where any 
shortcuts could be made like the book 
Photoshop, Painter & Illustrator Side- 
by-Side does. EES 


Verdict 


ED 


P 7 Making The Right 
XCalibre Communications Hosti ng Choice 


QUALITY INTERNET SERVICES 


FOr Youre ws in ee 6 


WEB HOSTING 


HOST MULTIPLE DOMAINS 
WITH OUR MULTIWEB PACKAGES 


SECURE HOSTING FROM £34.95 P/Y 


DOMAIN NAMES 


.info / .biz - £17.50 
.com / .net /.org - £19.95 
.co.uk - £9.95 


OTHER EXTENSIONS AVAILABLE 
SPECIAL OFFER EXTENDED FOR THIS MONTH 


RESELLERS SOLUTIONS 


HOST UNLIMITED WEB SITES 


WITH OUR RESELLER PACKAGES > WEB HOSTING 
= DOMAIN REGISTRATION 
COLOCATION ‘ 
= RESELLERS 
NO SETUP FEE ON COLOCATIONS “, 
SPECIAL OFFER EXTENDED FOR THIS MONTH = C O L O C A T I O N 
BANDWIDTH PRICES SLASHED i DEDICATED SERVERS 
PLEASE EMAIL OR TELEPHONE FOR A CUSTOM QUOTE 
FULL 47U RACK £450 p/m XCalibre provides its hosting services currently from 2 independent neutral 
NO SETUP FEE! co-location centres. These are located in London, and in Scotland. Over 


the next year, we plan to phase in additional facilities around the UK and 
Europe, to be able to provide the high quality services you need, in the 
location you require and at a price that suits you. 


DEDICATED SERVERS 


GET YOUR OWN DEDICATED SERVER 
FROM AS LITTLE AS £125 P/M 


Nnttp: //www.xeagmgre co Ak 


Professional hosting from £34.95 per year 
Support with the personal touch 
Simple administration with you own control panel 


~~ Telephone 0870 050 0080 email: sales@xcalibre.co.uk 


Hosting 
Auctions 
Construction 
Implementation 
Tracking 
Security 


, es 


All Service... No Spin 


om hosting solutions include as st. 
ation / Transfer Unlimi Business £120 billed yearly 
Unlimited £ Webspace (MB) 
Business Plus i isti 
£159 billed yearly Live statistics 
For more details and other services ODBC support 


www.az-tech-e.com 


Business Silver ; r 
£249 billed yearly Mirrored mail server 


Extra processing power 


This is the 


sales@az-tech-e.com apainesatch — eae ai te 


